如果你仔细阅读过上一篇文章,使用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'], ... }), ...
第三步:最终部署输出如下图所示:
到这儿就完事了吗?不,目前这些设置是写死的,而且只有两个入口,如果八九个呢?如果以后还要新增呢?我想一般工程师都会讨厌这样的重复工作。让我们一步步来优化吧。