公司使用 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], }))}最后，添加多頁面相互跳轉鏈接：
<!-- 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文件...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' }))}然后，開發環境不同路徑指向不同輸出文件是由 historyApiFallback 來處理的，生產就需要在 web服務 中將不同路徑指向打包后的不同文件。這里以 nginx 為例，配置如下：
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; }}以上，整個多頁面的配置就已經完成。這里是 完整demo
關于webpack4.x版本的差異
如果你使用的是 webpack4.x 版本，關于 webapck.prod.config.js 中 chunks 配置的順序就是這樣的： [prop, 'manifest', 'vendor'] 。
總結
以上所述是小編給大家介紹的vue項目添加多頁面配置的步驟詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
