// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件 ... plugins: [ ... new HtmlWebpackPlugin({ ... chunks: ['manifest', 'vendor', 'app'] // 增加此行 ... }) ... ] ... // build/webapck.prod.config.js的webpackConfig定义后紧接着添加 for(let prop in utils.multipleEntrys){ webpackConfig.plugins.push(new HtmlWebpackPlugin({ filename: `${prop}.html`, template: `./src/${prop}/${prop}.html`, inject: true, chunks: ['manifest', 'vendor', prop], minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' })) }
然后，开发环境不同路径指向不同输出文件是由 historyApiFallback 来处理的，生产就需要在 web服务 中将不同路径指向打包后的不同文件。这里以 nginx 为例，配置如下：
server { listen 92 default_server; listen [::]:92 default_server; server_name _; root D:\vue-multi-entry\dist; location / { try_files $uri $uri/ /index.html; } location /page1/ { try_files $uri $uri/ /page1.html; } }
以上，整个多页面的配置就已经完成。这里是 完整demo
关于webpack4.x版本的差异
如果你使用的是 webpack4.x 版本，关于 webapck.prod.config.js 中 chunks 配置的顺序就是这样的： [prop, 'manifest', 'vendor'] 。
总结
以上所述是小编给大家介绍的vue项目添加多页面配置的步骤详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: