vue多页应用基于vue-cli2.0

实际是多个项目，多个入口在webpack打包时打包到一起

目录结构
* project
    * user
        * App.vue
        * user.index.html
        * user.main.js  // router直接在这里配置
    * goods
        * App.vue
        * goods.index.html
        * goods.main.js  // router直接在这里配置

// 配置webpack.base.config.js

module.exports = {
  entry: {  
  
    // 修改这里的入口entry
    
    "user.index": resolve('./src/project/user/user.main.js'),
    "goods.index": resolve('./src/project/goods/goods.main.js')
  },
  // 其他内容不修改
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath :
      config.dev.assetsPublicPath
  },

配置 webpack.dev.conf.js

需要使用到new HtmlWebpackPlugin()这个插件
这个插件是修改生成html的

function GetHtmls () {
let files =[
    path.join(__dirname,'..','src/project/user/user.index.html'),
    path.join(__dirname,'..','src/project/goods/goods.index.html'),
]
    let plugins = [];
    let filenames = ['user.index','goods.index']
    for (let i=0;i< filenames.length;i++) {
        plugins.push(new HtmlWebpackPlugin({
            filename: filenames[i] + '.html',
            template: files[i],
            inject: true, // 是否注入对应的js
            chunks: ['manifest', 'vendor' , 'filenames[i]']  //这个配置使得每个入口index.html只引入自己的js
        }));
    }
    
    return plugins;
}


plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // 删除原来的此段配置
    // new HtmlWebpackPlugin({
    //  filename: 'index.html',
    //  template: 'index.html',
    //  inject: true
    // }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]    //在原来的配置最后追加上自己写的这个配置
  .concat(getHtmls())

// 配置 weback.prod.conf.js

和base同样的操作

只是
new HtmlWebpackPlugin({
  filename: filenames[i] + '.html',
  template: files[i],
  inject: true, // 是否注入对应的js
  chunks: ['manifest', 'vendor' , 'filenames[i]']    //这个配置使得每个入口index.html只引入自己的js
  minify: {
    removeComments: true,  //移除注释
    collapseWhitespace: true,   //空格合并
    removeAttributeQuotes: true   // 移除属性引号
  },
  chunksSortMode: 'dependency'
}),