最近遇到一個(gè)很難解決的問題，搜索了百度谷歌都沒有相關(guān)的資料，有可能是我搜索的關(guān)鍵詞不對(duì)或者是需要我換一種思路去解決，希望各位大佬能幫忙看一下怎么解決。問題目前是這樣的，目前有個(gè)基于VUE的單頁后臺(tái)項(xiàng)目，框架用的是基于vue和element的vue-element-admin（https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard）。腳手架是基于vue-cli3構(gòu)建的。

發(fā)現(xiàn)打包出來的js 是這樣的

去查看一下 基本上 思路就是 app下有個(gè)對(duì)應(yīng)不同路由路徑然后動(dòng)態(tài)去加載chunk文件。

但是問題來了：

業(yè)務(wù)開發(fā)上多個(gè)人負(fù)責(zé)不同模塊，并打包出來文件去合并到主分支。

1、所以第一步是需要根據(jù)模塊將JS分到不同的文件夾（這里肯定默認(rèn)要關(guān)閉chunk），這個(gè)vue.config.js 配置可以實(shí)現(xiàn)，但也希望有比較好的方式。

2、每個(gè)文件夾必須相互獨(dú)立，能夠屏蔽掉別的路由分支，進(jìn)行獨(dú)立的打包（這樣就是打包一個(gè)公共部分，以及所開發(fā)的模塊下的路由路徑）。打包完之后，線上環(huán)境可以直接把打包出來的模塊JS文件覆蓋或者添加到問題1所述下的對(duì)應(yīng)模塊文件夾下，并且程序運(yùn)行正常，且會(huì)根據(jù)新添加的代碼，在打包的頁面上有所變化。

以上問題帶有個(gè)人的思路，換一種解決方式也不是不行，所以下面就說一下為什么我想這么做，以便各位大佬看到以上兩個(gè)問題行不通的情況下能給我一個(gè)新的思路！畢竟我是真的百度不到相關(guān)的方案，萬分感謝！

由于項(xiàng)目業(yè)務(wù)線是一直不斷的往里面添加業(yè)務(wù)內(nèi)容。而我們堅(jiān)持既然使用了VUE這種單頁應(yīng)用優(yōu)異的特性，故而，我們不走mutipage模式的多頁面開發(fā)，路由既然交給前端了，就不希望他再有傳統(tǒng)的url跳轉(zhuǎn)這種事情發(fā)生。

導(dǎo)致這個(gè)工程文件會(huì)不斷不斷的變大。vue-cli3有提供局部的模塊調(diào)試方案 所以在dev環(huán)境下不受影響。但是！！！！

打包時(shí)間卻會(huì)隨著文件的不斷變多會(huì)無限大，導(dǎo)致在項(xiàng)目達(dá)到一定業(yè)務(wù)體量的時(shí)候可能改一個(gè)線上BUG就得花幾分鐘時(shí)間去重新打包整個(gè)項(xiàng)目目錄，再提交，效率極低。且多人開發(fā)時(shí)，基于不同模塊開發(fā)，會(huì)有不同的分支，但打包的文件卻一直是重復(fù)一個(gè)，那么，就必須合并工程文件到一個(gè)公共的環(huán)境，再在一個(gè)公共的環(huán)境進(jìn)行打包，否則就會(huì)有分支不同步的現(xiàn)象出現(xiàn)。

我也希望能簡(jiǎn)化這個(gè)步驟，能直接在自己的分支打包文件（其他路由屏蔽），再把屬于自己開發(fā)的那個(gè)模塊文件夾里的JS文件提取出來提交到打包文件夾進(jìn)行測(cè)試即可。這樣即節(jié)省了開發(fā)流程的復(fù)雜度，也解決了后期維護(hù)時(shí)的反復(fù)提交的復(fù)雜度，還提高了打包的效率。

ps：之前有做過一個(gè)實(shí)驗(yàn)發(fā)現(xiàn)一個(gè)規(guī)律也可以分享一下，只要是使用了懶加載的模式加載路由或模塊 那么不管是多少個(gè)子路由或嵌套了多少層的模塊文件 其加載的對(duì)應(yīng)js名都會(huì)在app.js里出現(xiàn) ，故而 懶加載模式下的新增路由 永遠(yuǎn)無法合并到 原有打包出來的目錄文件，因?yàn)閍pp.js里找不到該文件名。其實(shí)解決問題的核心就是app.js 里的這個(gè) 路由路徑問題（有沒有什么方式可以把所有的路由地圖 分離出app.js 并且 每次打包可以檢測(cè)到所有的模塊路徑，并生成新的路由地圖，但只打包想打包的那塊模塊的功能js，那么每次合并打包文件就是：

1、覆蓋路由地圖文件。2、覆蓋或添加新的模塊文件， 就搞定了。）

所以歸納下問題：

1、如何實(shí)現(xiàn)分工程文件的模塊去打包頁面，如何優(yōu)雅的屏蔽掉其他無用模塊路由（目前有試驗(yàn)過，就是粗暴的屏蔽對(duì)應(yīng)路由。）

2、如果以上的方案是不合理的，也可以介紹一下 如何在這個(gè)單頁應(yīng)用項(xiàng)目未來可期會(huì)不斷不斷的增加業(yè)務(wù)產(chǎn)品線的情況下（這是一直一直長(zhǎng)期增加的情況），能進(jìn)行正常且高效的打包工作以及程序小組成員之間合理的分工合作和開發(fā)的有效機(jī)制？

這個(gè)問題困擾了我好久，百度不到合適的方案，或者我壓根就是思路有問題，望各位大佬執(zhí)教一番QAQ

總結(jié)

以上是生活随笔為你收集整理的bootstrap-pagination数据全部加载到前端再进行处理_求助！vue单页项目如何改造路由使其能够进行分模块打包？...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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