vue多页应用基于vuecli2.0

实际是多个项目&＃xff0c;多个入口在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.jsmodule.exports &＃61; {entry: { // 修改这里的入口entry"user.index": resolve(&＃39;./src/project/user/user.main.js&＃39;),"goods.index": resolve(&＃39;./src/project/goods/goods.main.js&＃39;)},// 其他内容不修改output: {path: config.build.assetsRoot,filename: &＃39;[name].js&＃39;,publicPath: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ?config.build.assetsPublicPath :config.dev.assetsPublicPath},


配置 webpack.dev.conf.js需要使用到new HtmlWebpackPlugin()这个插件
这个插件是修改生成html的function GetHtmls () {
let files &＃61;[path.join(__dirname,&＃39;..&＃39;,&＃39;src/project/user/user.index.html&＃39;),path.join(__dirname,&＃39;..&＃39;,&＃39;src/project/goods/goods.index.html&＃39;),
]let plugins &＃61; [];let filenames &＃61; [&＃39;user.index&＃39;,&＃39;goods.index&＃39;]for (let i&＃61;0;i}plugins: [new webpack.DefinePlugin({&＃39;process.env&＃39;: require(&＃39;../config/dev.env&＃39;)}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// 删除原来的此段配置// new HtmlWebpackPlugin({// filename: &＃39;index.html&＃39;,// template: &＃39;index.html&＃39;,// inject: true// }),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, &＃39;../static&＃39;),to: config.dev.assetsSubDirectory,ignore: [&＃39;.*&＃39;]}])] //在原来的配置最后追加上自己写的这个配置.concat(getHtmls())


// 配置 weback.prod.conf.js和base同样的操作只是
new HtmlWebpackPlugin({filename: filenames[i] &＃43; &＃39;.html&＃39;,template: files[i],inject: true, // 是否注入对应的jschunks: [&＃39;manifest&＃39;, &＃39;vendor&＃39; , &＃39;filenames[i]&＃39;] //这个配置使得每个入口index.html只引入自己的jsminify: {removeComments: true, //移除注释collapseWhitespace: true, //空格合并removeAttributeQuotes: true // 移除属性引号},chunksSortMode: &＃39;dependency&＃39;
}),