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 的详解