Vue注意事項之|vue多頁面應用開發代碼結構以及webpack配置

前段時間涉及到了多文件入口的vue應用，做下來比較有收穫，也給革命一線的戰友們分享一下自己的經驗：
此次多入口vue應用的大概情況如圖：


以module文件夾作爲劃分，將最終打包成一個的vue應用，根據路由切分爲多個單獨獨立的功能塊（這裏的單獨獨立意味着每個功能塊都是單獨使用自己的vue實例、router等）。最終打包出來，是一個vue應用，但可根據上兩圖所示的路由區別，進入不同的模塊應用,。在某些使用場景下方便用戶操作。
應用場景比如：集成網站前臺和後臺管理的兩個功能塊，集成多個應用服務。

Vue文件篇

進入項目：
1.最外層目錄裏除index.html文件外，其餘如main.js，App.vue之類的文件刪去，如圖：

2.進入src文件夾，發現正常該有的項目文件出現了~

這些文件按正常編寫即可，然後多文件的藏身之處就在這裏的modules文件夾裏了。
3.進入modules文件夾，裏面的文件夾就是各個功能塊，也就是每個入口的文件夾。

隨意進入一個文件夾後，你會發現每個都是單獨的“洞天”，彷彿是一個完整的vue項目↓

不負衆望，模塊裏面的文件寫法也與普通項目無異，一個模塊就是一個獨立單元↓
這樣，我們就把一個vue應用分成了多個模塊，看起來，‘每個模塊都像是一個單獨的vue程序’，根據路由區分進入不同的模塊。 大概的代碼寫法與架構如上所述，接下來還需要配置一下webpack.config文件

webpack配置篇

webpack.config文件只需要簡單的對應配置一下，但是我在做的時候，網上找的很“揪心”，快從入門到放棄了?

---

好了，一起打開webpack.config吧，entry需要這樣，只需關注entry

module.exports = {
  externals: {
    "echarts": "echarts",
    "XLSX": "xlsx"
  },
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
    wxapp: './src/modules/wxapp/index.js',
    wshop: './src/modules/wshop/index.js',
    manage: './src/modules/manage/index.js',
    activity: './src/modules/activity/index.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath :
      config.dev.assetsPublicPath
  },

看到，entry用入口文件路徑對象了賦值，左側key值分別是每個入門文件的名稱，右側value對應路徑
然後依然在webpack.config文件中，plugins數組裏，使用HtmlWebpackPlugin插件分別爲每個入口文件配置，具體插件參數方法在文後鏈接給大家，主要要注意一點，chunks字段表示當前模塊使用哪個入口js文件，值就是對應等於上面entry中的key值！

plugins: [
 ……
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-admin-template',
      templateParameters: {
        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      },
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunks: ['app']
    }), new HtmlWebpackPlugin({
      filename: 'wxapp.html',
      template: 'src/modules/wxapp/index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'wxapp-template',
      templateParameters: {
        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      },
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunks: ['wxapp']
    }), new HtmlWebpackPlugin({
      filename: 'wshop.html',
      template: 'src/modules/wshop/index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'wshop-template',
      templateParameters: {
        BASE_URL: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      },
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunks: ['wshop']
    }), 
    new HtmlWebpackPlugin({
    ……

以上就爲全部經驗了，如果有需要補充或指證的地方歡迎修正，希望能幫助到需要的朋友.

附上：插件 html-webpack-plugin 的詳解