公司使用 vue-cli 創建的 vue項目 在初始化時并沒有做多頁面配置，隨著需求的不斷增加，發現有必要使用多頁面配置?？戳撕芏?vue多頁面配置 的文章，基本都是在初始化時就配置了多頁面。而且如果使用這些實現，需要調整當前項目的目錄結構，這點也是不能接受的。

最后，參考這些文章，在不調整當前項目目錄結構實現了多頁面的配置的添加。這里做下記錄、總結，方便以后復用。如果還能有幸幫助到有同樣需求的童鞋的話，那就更好了。

實現步驟

1.添加新增入口相關文件;
2.使用變量維護多入口；
3.開發環境讀取多入口配置；
4.生產環境讀取多入口配置；

新增入口相關文件

在 src 目錄下新增一個 page1 文件夾，新建新頁面的所需的相關文件(入口文件、HTML模板文件等)。我這邊直接 vue-cli 初始化創建相關文件復制了一份到 page1 文件夾下。如下：

├─App.vue├─main.js├─page1.html // 這里模板文件名稱需要與文件夾名稱相同，方便輸出模板讀取├─router|  └index.js├─components|   └HelloWorld.vue├─assets|  └logo.pngpage1/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  } ]})

使用變量維護多入口

我們在項目目錄下的 build/utils.js 的最后 exports 一個指定多入口的對象。如下：

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

之所以使用 build/utils.js ，是因為該文件在 webpack.base.conf.js 、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用導入。

開發環境讀取多入口配置

首先，在 build/webpack.base.conf.js 中，我們把上面定義的入口添加進 entry 配置：

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

然后，在 build/webpack.dev.conf.js 添加路徑解析和多頁面輸出：

// 添加解析，將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], }))}