vue项目添加多页面配置的步骤详解

├─App.vue
├─main.js
├─page1.html // 这里模板文件名称需要与文件夹名称相同，方便输出模板读取
├─router
|  └index.js
├─components
|   └HelloWorld.vue
├─assets
|  └logo.png
page1/router/index.js 需要对该页面的所有路由添加同文件夹名的公共路径，用于解析： 
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/page1/components/HelloWorld' // 这里也需要留意
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: '/',
 routes: [
  {
   path: '/page1/',
   redirect: '/page1/index'
  },
  {
   path: '/page1/index',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

// 这里，每个属性就是一个页面配置，指定该页面的入口文件
// 如果需要添加，只需多增加一个属性
// 属性名必和html模板文件名、目录名称相同
exports.multipleEntrys = {
 page1: './src/page1/main.js'
}

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

// 添加解析，将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标签 -->

// 在已经的HtmlWebpackPlugin中添加chunks配置，否则默认页面会注入所有页面的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;
  }
}