vue項(xiàng)目添加多頁(yè)面配置的步驟詳解

├─App.vue
├─main.js
├─page1.html // 這里模板文件名稱需要與文件夾名稱相同，方便

// 這里，每個(gè)屬性就是一個(gè)頁(yè)面配置，指定該頁(yè)面的入口文件
// 如果需要添加，只需多增加一個(gè)屬性
// 屬性名必和html模板文件名、目錄名稱相同
exports.multipleEntrys = {
 page1: './src/page1/main.js'
}

entry: {
 app: './src/main.js',
 ...utils.multipleEntrys // entry添加該行
 }

// 添加解析，將historyApiFallback的屬性修改如下：
 historyApiFallback: {
 rewrites: [
 // 將所有多入口遍歷成路徑解析項(xiàng)
 ...((()=>{
 let writes = []
 for(let prop in utils.multipleEntrys){
 // 使用屬性名匹配為正則
 // 這就是上面“需要對(duì)該頁(yè)面的所有路由添加同文件夾名的公共路徑”的原因
 let reg = new RegExp(`^/${prop}/`) 
 writes.push({
 from: reg,
 // 使用屬性名讀取模板文件
 // 這就是上面“模板文件名稱需要與文件夾名稱相同”的原因
 to: path.posix.join(config.dev.assetsPublicPath, `${prop}.html`)
 })
 }
 return writes
 })()),
 // 匹配所有路徑一定要在最后，否則該匹配之后的項(xiàng)，不會(huì)被執(zhí)行
 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') } 
 ],
 }
// 在已經(jīng)的HtmlWebpackPlugin中添加chunks配置，否則默認(rèn)頁(yè)面會(huì)注入所有頁(yè)面的js文件
...
plugins: [
 ...
 new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true,
 // 增加此行，
 // 'app'為默認(rèn)入口名稱，如果你的默認(rèn)入口不是'app'
 // 則這里需要替換
 chunks: ['manifest', 'vendor', 'app']
 })
 ...
]
...
// 在`devWebpackConfig`定義之后，緊接著添加多頁(yè)面

<!-- 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> 
...
<!-- 這里由于是多個(gè)頁(yè)面的跳轉(zhuǎn)，所以不能再使用router-link標(biāo)簽，需要使用a標(biāo)簽 -->

// 在已經(jīng)的HtmlWebpackPlugin中添加chunks配置，否則默認(rèn)頁(yè)面會(huì)注入所有頁(yè)面的js文件
...
plugins: [
 ...
 new HtmlWebpackPlugin({
 ...
 chunks: ['manifest', 'vendor', 'app'] // 增加此行
 ...
 })
 ...
]
...
// build/webapck.prod.config.js的webpackConfig定義后緊接著添加
for(let prop in utils.multipleEntrys){
 webpackConfig.plugins.push(new HtmlWebpackPlugin({
 filename: `${prop}.html`,
 template: `./src/${prop}/${prop}.html`,
 inject: true,
 chunks: ['manifest', 'vendor', prop],
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency'
 }))
}

server {
 listen 92 default_server;
 listen [::]:92 default_server;
 server_name _;
 root D:\vue-multi-entry\dist;
 location / {
 try_files $uri $uri/ /index.html;
 }
 location /page1/ {
 try_files $uri $uri/ /page1.html;
 }
}