打包 Vue 多页面应用

如果你仔细阅读过上一篇文章，使用 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'],
  ...
}),
...

最终部署

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

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

相关教程

• 开发 Vue 多页面应用
• 配置 Vue 多页面应用