添加路径解析和多页面输出：
// 添加解析，将historyApiFallback的属性修改如下：
historyApiFallback: {
rewrites: [
// 将所有多入口遍历成路径解析项
...((()=>{
let writes = [] for(let prop in utils.multipleEntrys){
// 使用属性名匹配为正则
// 这就是上面“需要对该页面的所有路由添加同文件夹名的公共路径”的原因
let reg = new RegExp(`^/${prop}/`)
writes.push({
from: reg,
// 使用属性名读取模板文件
// 这就是上面“模板文件名称需要与文件夹名称相同”的原因
to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
})
}
return writes
})()),
// 匹配所有路径一定要在最后，否则该匹配之后的项，不会被执行
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }
],
}
// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
// 增加此行，
// 'app'为默认入口名称，如果你的默认入口不是'app'
// 则这里需要替换
chunks: ['manifest', 'vendor', 'app'] })
...
]...
// 在`devWebpackConfig`定义之后，紧接着添加多页面输出：
for(let prop in utils.multipleEntrys){
devWebpackConfig.plugins.push(new HtmlWebpackPlugin({
filename: `${prop}.html`,
// html模板路径,使用属性名作为文件夹名称
// 这是新页面文件夹名称需要和多入口配置变量属性名相同的原因
template: `./src/${prop}/${prop}.html`,
inject: true,
chunks: ['manifest', 'vendor', prop],
}))
}最后，添加多页面相互跳转链接：
<!-- src/components/HelloWorld.vue -->
...
<a href="/page1/index" rel="external nofollow" >to page B</a>
...<!-- src/page1/components/HelloWorld.vue -->
...
<a href="/" rel="external nofollow" >to page A</a>
...
<!-- 这里由于是多个页面的跳转，所以不能再使用router-link标签，需要使用a标签 -->
到这里，开发环境的多页面配置已经完成，重新
npm run dev 一下，即可多页面跳转。生产环境读取多入口配置
首先，在
webapck.prod.config.js 中添加多页面输出。
// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的js文件
