vue 如何從單頁(yè)應(yīng)用改造成多頁(yè)應(yīng)用
最近接到這樣一個(gè)需求,將之前的三個(gè)項(xiàng)目合并成一個(gè),并且要做成后臺(tái)可配置化,前端動(dòng)態(tài)引入組件的模板化框架。
聽(tīng)起來(lái)是不是很拗口。。。我自己當(dāng)時(shí)都蒙了。
簡(jiǎn)單分析下需求,就是,項(xiàng)目A/B/C的內(nèi)容是交叉的,有的頁(yè)面不同,有的頁(yè)面和組件是公用的,例如A項(xiàng)目多了個(gè)人中心及其里面所有內(nèi)容(最全的一個(gè)項(xiàng)目,但是是放在微信中的,需要獲取微信授權(quán)),B項(xiàng)目是通用版的項(xiàng)目(也就是說(shuō)可以放在微信,也可以放在app內(nèi),不需要獲取授權(quán)之類(lèi)的。),C項(xiàng)目是A/B項(xiàng)目中共有的一個(gè)頁(yè)面功能抽取出來(lái)了。
所以有的時(shí)候比如說(shuō)這塊功能需要調(diào)整,那么就得A/B/C三個(gè)項(xiàng)目關(guān)于這塊的功能與頁(yè)面也要一起調(diào)整。
動(dòng)態(tài)化組件的意思就是,D頁(yè)面由組件1234按照這樣的順序排列構(gòu)成,同時(shí)D頁(yè)面也供機(jī)構(gòu)5、6、7共同使用,但是機(jī)構(gòu)6突然想要2134這樣的順序,機(jī)構(gòu)7又想要4132這樣的順序。代碼依舊是一套,而不是重新拉個(gè)分支,然后這個(gè)分支將D頁(yè)面改成2134給機(jī)構(gòu)6,再拉個(gè)分支將D頁(yè)面改成4132給機(jī)構(gòu)7。這樣做會(huì)增加服務(wù)器的壓力,每次機(jī)構(gòu)有定制化需求就重新拉分支的話,機(jī)構(gòu)很多的話,容量會(huì)不夠的。
(好像篇幅有點(diǎn)長(zhǎng),,扯得有點(diǎn)多了)
關(guān)于動(dòng)態(tài)組件
這一塊簡(jiǎn)單說(shuō)一下,如果有不懂的,可以留言,我會(huì)把我知道的說(shuō)出來(lái),我這一塊做的主要是<components :is="xxx">
配合vuex
,來(lái)做的。
前端頁(yè)面改成上述模式,具體的組件排列順序由后臺(tái)傳過(guò)來(lái),比如說(shuō)請(qǐng)求接口的時(shí)候,告訴它這是在D頁(yè)面,并且把相應(yīng)的機(jī)構(gòu)號(hào)6傳過(guò)去,后臺(tái)傳給我一個(gè)組件數(shù)組,moduleList:['2', '1', '3', '4']
,然后我前端的<components :is="item" v-for="(item, index) in moduleList" :key="index">
會(huì)按照moduleList里的組件順序來(lái)動(dòng)態(tài)渲染組件,之前一些父子組件傳數(shù)據(jù),在這里就變得不太適用了,所以這里的數(shù)據(jù)改用vuex
存儲(chǔ)。考慮到vuex
在刷新數(shù)據(jù)丟失的問(wèn)題,部分比較重要的,不想重新請(qǐng)求的,改用sessionStorage
存儲(chǔ)。
關(guān)于多入口多出口
其實(shí)就是最開(kāi)始的項(xiàng)目入口是App.vue
和main.js
,打包出來(lái)的出入口是index.html,然后現(xiàn)在增加了兩個(gè),我這邊是增加了genneral.js和genneral.html
以及single.js
和single.html
。
1.首先要更改vue-cli生成的webpack里的參數(shù),聲明一下我這個(gè)版本的webpack版本還是2.6.x的,比較老了,現(xiàn)在應(yīng)該都到4.x.x了吧。
PS:路由和store記得要各自獨(dú)立,因?yàn)槲疫@里的vuex很少只涉及一兩個(gè)模塊。并且僅僅是傳遞數(shù)據(jù)之類(lèi)的,所以這里沒(méi)有做成獨(dú)立的。
2.修改build/webpack.base.conf.js
3.修改 build/webpack.dev.conf.js
4.修改 build/webpack.prod.conf.js
5.修改 config/index.js
理一下對(duì)應(yīng)關(guān)系
main.js ==> App.vue ==> router/index.js A項(xiàng)目 general.js ==> general.vue ==> router/general.js B項(xiàng)目 single.js ==> single.vue ==> router/single.js C項(xiàng)目
部署的時(shí)候分三個(gè)不同的url
xxxxx/index.html對(duì)應(yīng)A項(xiàng)目 xxxxx/general.html 對(duì)應(yīng)B項(xiàng)目 xxxxx/single.html對(duì)應(yīng)C項(xiàng)目
至于頁(yè)面中的差異,我是通過(guò)v-if
來(lái)控制,A項(xiàng)目的D頁(yè)面是否有頂部tab
,B項(xiàng)目的D頁(yè)面是否有底部footer
。
因?yàn)檫@些頁(yè)面大致是一樣,僅有部分微調(diào)。所以改成用v-if
來(lái)控制。
寫(xiě)了一個(gè)demo,方便大家看,僅僅是改了webpack
的配置而已,戳這里
以上就是vue 如何從單頁(yè)應(yīng)用改造成多頁(yè)應(yīng)用的詳細(xì)內(nèi)容,更多關(guān)于vue 單頁(yè)改多頁(yè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue 單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的優(yōu)劣
- vue-cli單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用配置詳解
- webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法
- 詳解vue-cli3多頁(yè)應(yīng)用改造
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用
- 詳解Vue CLI3 多頁(yè)應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- 手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法
- Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄
- 詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用
相關(guān)文章
解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題,需要的朋友可以參考下2023-12-12詳解為什么Vue中不要用index作為key(diff算法)
這篇文章主要介紹了詳解為什么Vue中不要用index作為key(diff算法),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04基于Vite2.x的Vue 3.x項(xiàng)目的搭建實(shí)現(xiàn)
這篇文章主要介紹了基于Vite2.x的Vue 3.x項(xiàng)目的搭建實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue動(dòng)態(tài)綁定圖標(biāo)的完整步驟
動(dòng)態(tài)綁定是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定圖標(biāo)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-05-05如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10