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

如果你仔细阅读过上一篇文章，使用Vue-cli部署多页面应用就很简单了。关键在于我们要修改生产环境下模板文件和要写入文件路径，还要显示设置chunk仅为应用添加特定块。我们的目标是将app1.html和app2.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'],
  ...
}),
...

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

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