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

發現打包出來的js 是這樣的

去查看一下 基本上 思路就是 app下有個對應不同路由路徑然后動態去加載chunk文件。

但是問題來了：

業務開發上多個人負責不同模塊，并打包出來文件去合并到主分支。

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

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

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

由于項目業務線是一直不斷的往里面添加業務內容。而我們堅持既然使用了VUE這種單頁應用優異的特性，故而，我們不走mutipage模式的多頁面開發，路由既然交給前端了，就不希望他再有傳統的url跳轉這種事情發生。

導致這個工程文件會不斷不斷的變大。vue-cli3有提供局部的模塊調試方案 所以在dev環境下不受影響。但是！！！！

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

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

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

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

所以歸納下問題：

1、如何實現分工程文件的模塊去打包頁面，如何優雅的屏蔽掉其他無用模塊路由（目前有試驗過，就是粗暴的屏蔽對應路由。）

2、如果以上的方案是不合理的，也可以介紹一下 如何在這個單頁應用項目未來可期會不斷不斷的增加業務產品線的情況下（這是一直一直長期增加的情況），能進行正常且高效的打包工作以及程序小組成員之間合理的分工合作和開發的有效機制？

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。