基于vue-cli如何搭建多模塊且各模塊獨(dú)立打包的項(xiàng)目

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

如果我們?cè)陂_(kāi)發(fā)系統(tǒng)A時(shí)，能夠按模塊劃分生成多份靜態(tài)資源包，最終的成果物中，會(huì)有多個(gè)子目錄，每個(gè)子目錄可獨(dú)立運(yùn)行，完成一個(gè)業(yè)務(wù)功能。這樣的話，我們有任何系統(tǒng)需要我們開(kāi)發(fā)過(guò)的任何模塊，都可以直接打包指定的模塊，靈活組裝。

優(yōu)點(diǎn)：

1、可與其他系統(tǒng)靈活組裝

2、各個(gè)模塊相互不受影響，所以不受框架和開(kāi)發(fā)模式的制約

 3、不同模塊可以分開(kāi)部署

4、后期維護(hù)風(fēng)險(xiǎn)小，可以持續(xù)的、穩(wěn)定的進(jìn)行維護(hù)

 缺點(diǎn)：

1、各個(gè)模塊有相互獨(dú)立的資源包，那么如果有相同的資源引用，不能復(fù)用

2、模塊的組裝要依賴iframe，所以要對(duì)瀏覽器安全設(shè)置、cookie共享等問(wèn)題進(jìn)行單獨(dú)處理

3、用iframe來(lái)包裹組件，組件所能控制到的范圍就是其所在的iframe，當(dāng)涉及到全屏的應(yīng)用場(chǎng)景時(shí)，會(huì)比較麻煩

4、不同組件之間的通信比較麻煩 實(shí)現(xiàn)目標(biāo)

vue-cli默認(rèn)打包方式的成果物：

修改配置后生成的成果物結(jié)構(gòu)：

思路

由于我們現(xiàn)在的項(xiàng)目是多模塊的，每個(gè)模塊都應(yīng)該有獨(dú)立的入口，所以我們修改src目錄結(jié)構(gòu)如下：

注意：原來(lái)的src下的main.js、index.html和app.vue已經(jīng)沒(méi)用了，可以刪掉

然后模塊內(nèi)的目錄結(jié)構(gòu)如下圖所示：

注意：

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

以下是修改webpack配置的詳細(xì)步驟

第一步：增加build/module-conf.js用來(lái)處理獲取模塊目錄等問(wèn)題

第二步：增加build/build-all.js用來(lái)處理循環(huán)執(zhí)行打包命令

第三步：修改build/build.js增加MODULE_ENV參數(shù)，用來(lái)記錄當(dāng)前打包的模塊名稱，增加MODE_ENV參數(shù)，用來(lái)記錄當(dāng)前打包的模式

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

第五步：修改webpack.base.conf.js的入口配置，根據(jù)傳參，動(dòng)態(tài)配置入口文件

第六步：修改webpack.dev.conf.js的配置,增加多入口時(shí)webpackHtmlPlugin插件的配置，增加靜態(tài)資源服務(wù)器的配置

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

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

npm run build

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

npm run build moduleName1,moduleName2,...

打包所有模塊，然后每個(gè)模塊彼此獨(dú)立，有幾個(gè)模塊，就產(chǎn)生幾個(gè)靜態(tài)資源包，這種方式不會(huì)復(fù)用重復(fù)的資源

npm run build-all

以上是“基于vue-cli如何搭建多模塊且各模塊獨(dú)立打包的項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！