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

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

這一塊簡單說一下，如果有不懂的，可以留言，我會把我知道的說出來，我這一塊做的主要是<components :is="xxx">配合vuex，來做的。
前端頁面改成上述模式，具體的組件排列順序由后臺傳過來，比如說請求接口的時候，告訴它這是在D頁面，并且把相應(yīng)的機(jī)構(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)于多入口多出口

其實(shí)就是最開始的項(xiàng)目入口是和，打包出來的出入口是，然后現(xiàn)在增加了兩個，我這邊是增加了和以及和。

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

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

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

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

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

5.修改 config/

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

==> ==> router/ A項(xiàng)目 general.js ==> general.vue ==> router/general.js B項(xiàng)目==> single.vue ==> router/ C項(xiàng)目

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

xxxxx/對應(yīng)A項(xiàng)目 xxxxx/ 對應(yīng)B項(xiàng)目 xxxxx/對應(yīng)C項(xiàng)目

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

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

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

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vue init webpack缺少标识符_vue 如何从单页应用改造成多页应用_vue.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。