使用Vue-cli部署多页面应用

如果你仔细阅读过上一篇文章,使用Vue-cli部署多页面应用就很简单了。关键在于我们要修改生产环境下模板文件和要写入文件路径,还要显示设置chunk仅为应用添加特定块。我们的目标是将app1.htmlapp2.htm输出在默认的dist目录下。

第一步:在index.js看指定index.html的模板文件。

build: {
  // Template for index.html
  app1: path.resolve(__dirname, '../dist/app1.html'),
  app2: path.resolve(__dirname, '../dist/app2.html'),
  ...
}

第二步:打开webpack.prod.conf.js,此处同样要修改HtmlWebpackPlugin插件配置。

new HtmlWebpackPlugin({
  filename: config.build.app1,
  template: 'src/app1/index.html',
  inject: true,
  chunks: ['manifest', 'vendor', 'app1'],
  ...
}),
new HtmlWebpackPlugin({
  filename: config.build.app2,
  template: 'src/app2/index.html',
  inject: true,
  chunks: ['manifest', 'vendor', 'app2'],
  ...
}),
...

第三步:最终部署输出如下图所示:

到这儿就完事了吗?不,目前这些设置是写死的,而且只有两个入口,如果八九个呢?如果以后还要新增呢?我想一般工程师都会讨厌这样的重复工作。让我们一步步来优化吧。