vue項目添加多頁面配置的步驟詳解

來源：懂視網責編：小采時間：2020-11-27 21:56:29

vue項目添加多頁面配置的步驟詳解

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

推薦度：

點擊下載本文 文檔為doc格式

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

公司使用 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.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 } ] })

使用變量維護多入口

我們在項目目錄下的 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項目添加多頁面配置的步驟詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com