您好,登錄后才能下訂單哦!
怎么在vue項(xiàng)目中添加多頁(yè)面配置?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
實(shí)現(xiàn)步驟
1.添加新增入口相關(guān)文件;
2.使用變量維護(hù)多入口;
3.開(kāi)發(fā)環(huán)境讀取多入口配置;
4.生產(chǎn)環(huán)境讀取多入口配置;
新增入口相關(guān)文件
在 src 目錄下新增一個(gè) page1 文件夾,新建新頁(yè)面的所需的相關(guān)文件(入口文件、HTML模板文件等)。我這邊直接 vue-cli 初始化創(chuàng)建相關(guān)文件復(fù)制了一份到 page1 文件夾下。如下:
├─App.vue ├─main.js ├─page1.html // 這里模板文件名稱需要與文件夾名稱相同,方便輸出模板讀取 ├─router | └index.js ├─components | └HelloWorld.vue ├─assets | └logo.png page1/router/index.js 需要對(duì)該頁(yè)面的所有路由添加同文件夾名的公共路徑,用于解析: 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 } ] })
使用變量維護(hù)多入口
我們?cè)陧?xiàng)目目錄下的 build/utils.js 的最后 exports 一個(gè)指定多入口的對(duì)象。如下:
// 這里,每個(gè)屬性就是一個(gè)頁(yè)面配置,指定該頁(yè)面的入口文件 // 如果需要添加,只需多增加一個(gè)屬性 // 屬性名必和html模板文件名、目錄名稱相同 exports.multipleEntrys = { page1: './src/page1/main.js' }
之所以使用 build/utils.js ,是因?yàn)樵撐募?webpack.base.conf.js
、 webpack.prod.conf.js 、 webpack.dev.conf.js 都用導(dǎo)入。
開(kāi)發(fā)環(huán)境讀取多入口配置
首先,在 build/webpack.base.conf.js
中,我們把上面定義的入口添加進(jìn) entry 配置:
entry: { app: './src/main.js', ...utils.multipleEntrys // entry添加該行 }
然后,在 build/webpack.dev.conf.js
添加路徑解析和多頁(yè)面輸出:
// 添加解析,將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è)面輸出: for(let prop in utils.multipleEntrys){ devWebpackConfig.plugins.push(new HtmlWebpackPlugin({ filename: `${prop}.html`, // html模板路徑,使用屬性名作為文件夾名稱 // 這是新頁(yè)面文件夾名稱需要和多入口配置變量屬性名相同的原因 template: `./src/${prop}/${prop}.html`, inject: true, chunks: ['manifest', 'vendor', prop], })) }
最后,添加多頁(yè)面相互跳轉(zhuǎn)鏈接:
<!-- 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)簽 -->
到這里,開(kāi)發(fā)環(huán)境的多頁(yè)面配置已經(jīng)完成,重新 npm run dev
一下,即可多頁(yè)面跳轉(zhuǎn)。
生產(chǎn)環(huán)境讀取多入口配置
首先,在 webapck.prod.config.js
中添加多頁(yè)面輸出。
// 在已經(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' })) }
然后,開(kāi)發(fā)環(huán)境不同路徑指向不同輸出文件是由 historyApiFallback
來(lái)處理的,生產(chǎn)就需要在 web服務(wù) 中將不同路徑指向打包后的不同文件。這里以 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; } }
關(guān)于怎么在vue項(xiàng)目中添加多頁(yè)面配置問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。