vue项目添加多页面配置的步骤详解

...
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-entrydist;
  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项目添加多页面配置的步骤详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！