/* vue.config.js */ const utils = require('./build/utils') module.exports = { ... configureWebpack: config => { config.entry = utils.getEntries() // 直接覆盖 entry 配置 // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空 return { plugins: [...utils.htmlPlugin()] } }, ... }
如此我们多页应用的多入口和多模板的配置就完成了，这时候我们运行命令 yarn build 后你会发现 dist 目录下生成了 3 个 html 文件，分别是 index.html 、 page1.html 和 page2.html
四、使用 pages 配置
其实，在 vue.config.js 中，我们还有一个配置没有使用，便是 pages 。 pages 对象允许我们为应用配置多个入口及模板，这就为我们的多页应用提供了开放的配置入口。官方示例代码如下
/* vue.config.js */ module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时， // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时， // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } }
我们不难发现， pages 对象中的 key 就是入口的别名，而其 value 对象其实是入口 entry 和模板属性的合并，这样我们上述介绍的获取多入口和多模板的方法就可以合并成一个函数来进行多页的处理，合并后的 setPages 方法如下
// pages 多入口配置 exports.setPages = configs => { let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') let map = {} entryFiles.forEach(filePath => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let tmp = filePath.substring(0, filePath.lastIndexOf('\/')) let conf = { // page 的入口 entry: filePath, // 模板来源 template: tmp + '.html', // 在 dist/index.html 的输出 filename: filename + '.html', // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor', filename], inject: true, }; if (configs) { conf = merge(conf, configs) } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, // 删除 html 中的注释代码 collapseWhitespace: true, // 删除 html 中的空白符 // removeAttributeQuotes: true // 删除 html 元素中属性的引号 }, chunksSortMode: 'manual'// 按 manual 的顺序引入 }) } map[filename] = conf }) return map }
上述代码我们 return 出的 map 对象就是 pages 所需要的配置项结构，我们只需在 vue.config.js 中引用即可
/* vue.config.js */ const utils = require('./build/utils') module.exports = { ... pages: utils.setPages(), ... }
这样我们多页应用基于 pages 配置的改进就大功告成了，当你运行打包命令来查看输出结果的时候，你会发现和之前的方式相比并没有什么变化，这就说明这两种方式都适用于多页的构建，但是这里还是推荐大家使用更便捷的 pages 配置