基于vue-cli如何搭建多模塊且各模塊獨立打包的項目

小編給大家分享一下基于vue-cli如何搭建多模塊且各模塊獨立打包的項目，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

如果我們在開發系統A時，能夠按模塊劃分生成多份靜態資源包，最終的成果物中，會有多個子目錄，每個子目錄可獨立運行，完成一個業務功能。這樣的話，我們有任何系統需要我們開發過的任何模塊，都可以直接打包指定的模塊，靈活組裝。

優點：

1、可與其他系統靈活組裝

2、各個模塊相互不受影響，所以不受框架和開發模式的制約

 3、不同模塊可以分開部署

4、后期維護風險小，可以持續的、穩定的進行維護

 缺點：

1、各個模塊有相互獨立的資源包，那么如果有相同的資源引用，不能復用

2、模塊的組裝要依賴iframe，所以要對瀏覽器安全設置、cookie共享等問題進行單獨處理

3、用iframe來包裹組件，組件所能控制到的范圍就是其所在的iframe，當涉及到全屏的應用場景時，會比較麻煩

4、不同組件之間的通信比較麻煩 實現目標

vue-cli默認打包方式的成果物：

修改配置后生成的成果物結構：

思路

由于我們現在的項目是多模塊的，每個模塊都應該有獨立的入口，所以我們修改src目錄結構如下：

注意：原來的src下的main.js、index.html和app.vue已經沒用了，可以刪掉

然后模塊內的目錄結構如下圖所示：

注意：

這里跟原來的src下的main.js、index.html和app.vue一樣的，只不過我們把main.js改成了index.js而已。 至于模塊內要使用路由、狀態管理都可以根據自己的需求去配置了。

以下是修改webpack配置的詳細步驟

第一步：增加build/module-conf.js用來處理獲取模塊目錄等問題

第二步：增加build/build-all.js用來處理循環執行打包命令

第三步：修改build/build.js增加MODULE_ENV參數，用來記錄當前打包的模塊名稱，增加MODE_ENV參數，用來記錄當前打包的模式

第四步：修改config/index.js的配置，修改打包時的出口目錄配置、html入口模板的配置以及靜態資源路徑配置

第五步：修改webpack.base.conf.js的入口配置，根據傳參，動態配置入口文件

第六步：修改webpack.dev.conf.js的配置,增加多入口時webpackHtmlPlugin插件的配置，增加靜態資源服務器的配置

第七步：修改webpack.prod.conf.js的配置,增加對不同打包模式的處理。

第八步：修改package.json，增加npm run build-all指令 構建指令 打包全部模塊到一個資源包下面，每個模塊的入口是module.html文件，靜態資源都在static目錄中，這種方式可以復用重復的資源

npm run build

打包指定模塊到一個資源包下面,每個模塊的入口是module.html文件，靜態資源都在static目錄中，這種方式可以復用重復的資源

npm run build moduleName1,moduleName2,...

打包所有模塊，然后每個模塊彼此獨立，有幾個模塊，就產生幾個靜態資源包，這種方式不會復用重復的資源

npm run build-all

以上是“基于vue-cli如何搭建多模塊且各模塊獨立打包的項目”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！