vue 實(shí)現(xiàn)單頁(yè)應(yīng)用改成多頁(yè)應(yīng)用的方法？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
簡(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)有定制化需求就重新拉分支的話(huà)，機(jī)構(gòu)很多的話(huà)，容量會(huì)不夠的。
(好像篇幅有點(diǎn)長(zhǎng)，，扯得有點(diǎn)多了)
關(guān)于動(dòng)態(tài)組件
這一塊簡(jiǎn)單說(shuō)一下，如果有不懂的，可以留言，我會(huì)把我知道的說(shuō)出來(lái)，我這一塊做的主要是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']，然后我前端的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)目
重慶分公司
重慶分公司
