最近接到這樣一個需求，將之前的三個項目合并成一個，并且要做成后臺可配置化，前端動態(tài)引入組件的模板化框架。
聽起來是不是很拗口。。。我自己當(dāng)時都蒙了。
簡單分析下需求，就是，項目A/B/C的內(nèi)容是交叉的，有的頁面不同，有的頁面和組件是公用的，例如A項目多了個人中心及其里面所有內(nèi)容（最全的一個項目，但是是放在微信中的，需要獲取微信授權(quán)），B項目是通用版的項目（也就是說可以放在微信，也可以放在app內(nèi)，不需要獲取授權(quán)之類的。）,C項目是A/B項目中共有的一個頁面功能抽取出來了。
所以有的時候比如說這塊功能需要調(diào)整，那么就得A/B/C三個項目關(guān)于這塊的功能與頁面也要一起調(diào)整。
動態(tài)化組件的意思就是，D頁面由組件1234按照這樣的順序排列構(gòu)成，同時D頁面也供機構(gòu)5、6、7共同使用，但是機構(gòu)6突然想要2134這樣的順序，機構(gòu)7又想要4132這樣的順序。代碼依舊是一套，而不是重新拉個分支，然后這個分支將D頁面改成2134給機構(gòu)6，再拉個分支將D頁面改成4132給機構(gòu)7。這樣做會增加服務(wù)器的壓力，每次機構(gòu)有定制化需求就重新拉分支的話，機構(gòu)很多的話，容量會不夠的。
(好像篇幅有點長，，扯得有點多了)

關(guān)于動態(tài)組件

這一塊簡單說一下，如果有不懂的，可以留言，我會把我知道的說出來，我這一塊做的主要是<components :is="xxx">配合vuex，來做的。
前端頁面改成上述模式，具體的組件排列順序由后臺傳過來，比如說請求接口的時候，告訴它這是在D頁面，并且把相應(yīng)的機構(gòu)號6傳過去，后臺傳給我一個組件數(shù)組，moduleList:['2', '1', '3', '4']，然后我前端的<components :is="item" v-for="(item, index) in moduleList" :key="index">會按照moduleList里的組件順序來動態(tài)渲染組件，之前一些父子組件傳數(shù)據(jù)，在這里就變得不太適用了，所以這里的數(shù)據(jù)改用vuex存儲。考慮到vuex在刷新數(shù)據(jù)丟失的問題，部分比較重要的，不想重新請求的，改用sessionStorage存儲。

關(guān)于多入口多出口

其實就是最開始的項目入口是App.vue和main.js，打包出來的出入口是index.html，然后現(xiàn)在增加了兩個，我這邊是增加了genneral.js和genneral.html以及single.js和single.html。

1.首先要更改vue-cli生成的webpack里的參數(shù)，聲明一下我這個版本的webpack版本還是2.6.x的，比較老了，現(xiàn)在應(yīng)該都到4.x.x了吧。

PS：路由和store記得要各自獨立，因為我這里的vuex很少只涉及一兩個模塊。并且僅僅是傳遞數(shù)據(jù)之類的，所以這里沒有做成獨立的。

2.修改build/webpack.base.conf.js

3.修改 build/webpack.dev.conf.js

4.修改 build/webpack.prod.conf.js

5.修改 config/index.js

理一下對應(yīng)關(guān)系

main.js ==> App.vue ==> router/index.js A項目
general.js ==> general.vue ==> router/general.js B項目
single.js ==> single.vue ==> router/single.js C項目

部署的時候分三個不同的url

xxxxx/index.html對應(yīng)A項目
xxxxx/general.html 對應(yīng)B項目
xxxxx/single.html對應(yīng)C項目

至于頁面中的差異，我是通過v-if來控制，A項目的D頁面是否有頂部tab，B項目的D頁面是否有底部footer。
因為這些頁面大致是一樣，僅有部分微調(diào)。所以改成用v-if來控制。

寫了一個demo，方便大家看，僅僅是改了webpack的配置而已，戳這里

以上就是vue 如何從單頁應(yīng)用改造成多頁應(yīng)用的詳細內(nèi)容，更多關(guān)于vue 單頁改多頁的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論