我們在開發(fā)vue 項(xiàng)目的時(shí)候，大多數(shù)情況下都是使用官方提供的開箱即用的模板，一頓操作猛如虎，那酸爽，回味無窮。然后我們需要起一個(gè)新項(xiàng)目的時(shí)候，cv大法屢試不爽（ctrl+c,ctrl+v）。一頓粘貼復(fù)制操作，回頭大刀闊斧增刪改，內(nèi)心波濤洶涌。完事干凈利落的在控制臺敲入啟動命令，各種錯(cuò)誤讓你的內(nèi)心開始凌亂了，連摳頭的勇氣也沒有。類似這種燒時(shí)間，燒腦，還少頭發(fā)的情況屢見不鮮。作為一個(gè)碼農(nóng)，不偷懶就只能加班。所以，對于多個(gè)vue項(xiàng)目，可以將多個(gè)項(xiàng)目揉在一起，抽離公共的組件，靜態(tài)資源。每個(gè)項(xiàng)目獨(dú)立打包。這篇文章簡單介紹一下如何對在官方的vue腳手架提供的單文件模板項(xiàng)目改成多個(gè)項(xiàng)目的
第一步：改造模板項(xiàng)目目錄結(jié)構(gòu)
首先將官方單文件模板的目錄結(jié)構(gòu)進(jìn)行一個(gè)簡單的改造：
在src 目錄下創(chuàng)建一個(gè)projects（或者modules）文件夾用來放置你的項(xiàng)目（模塊），例如有兩個(gè)項(xiàng)目projectA,projectB。將原先的入口文件main.js 以及根組件App.vue, 以及路由模塊都放置到對應(yīng)的項(xiàng)目文件夾下。然后根目錄中的模板文件index.html 也分別移動到對應(yīng)的項(xiàng)目中。
第二步：創(chuàng)建配置文件
在模板項(xiàng)目根目錄下的config文件夾中創(chuàng)建四個(gè)js文件 build.js、build-all.js、dev.js、projectConfig.js 。如圖示：
在模板項(xiàng)目中，在控制臺輸入 npm run dev 就會啟動當(dāng)前的項(xiàng)目，以此進(jìn)行開發(fā)的調(diào)試。但是現(xiàn)在是多項(xiàng)目，因此需要實(shí)現(xiàn)在控制臺輸入npm run dev projectA 就啟動projectA 項(xiàng)目，?npm run dev projectB 就啟動 projectB 項(xiàng)目，npm run dev 啟動一個(gè)默認(rèn)項(xiàng)目。也就是根據(jù)運(yùn)行命令動態(tài)的改變webpack 的配置。projectConfig.js 文件就是根據(jù)控制臺命令動態(tài)生成當(dāng)前運(yùn)行或者打包的項(xiàng)目的路徑，以及項(xiàng)目名稱。他返回的是一個(gè)對象，包含的是當(dāng)前項(xiàng)目（模塊）的名稱，項(xiàng)目（模塊）所在目錄。代碼如圖所示：
以projectA 項(xiàng)目為例，假如啟動 projectA, 控制臺運(yùn)行npm run dev projectA, projectConfig.js 生成的是{buildPath:"./src/projects/projectA",projectName:"projectA"}; 當(dāng)然前面說了 運(yùn)行 npm run dev 需要啟動的是一個(gè)默認(rèn)的項(xiàng)目，我們可以在根目錄config文件夾下的index.js 添加一個(gè)默認(rèn)的項(xiàng)目配置：
projectConfig.js 中的process.argv[2] 返回的是的命令執(zhí)行運(yùn)行時(shí)的參數(shù)。通過node.js readdirSync 獲取 所有項(xiàng)目的名稱 然后遍歷一個(gè)以項(xiàng)目名稱為key的復(fù)雜對象，這樣就可以通過參數(shù)來獲取當(dāng)前運(yùn)行的項(xiàng)目的參數(shù)了。
第三步：編寫運(yùn)行以及打包腳本
運(yùn)行腳本就是config文件夾下的的dev.js, 在該腳本中引入projectConfig.js 返回的配置對象并將其projectName，以及buildPath賦值給 node.js 環(huán)境變量process.env 。其實(shí)也可以用node.js 全局變量 global 去存儲，或者用js文件存儲也是一樣的。然后執(zhí)行另外一個(gè)命令,npm run d。 實(shí)際上真正的啟動調(diào)試的命令是這個(gè) d 命令，也就是vue 腳手架默認(rèn)的開發(fā)調(diào)試啟動命令。dev.js 代碼如圖示：
這里也要對控制臺命令行的腳本修改一下，將根目錄下package.json 改成如下圖所示：
同理，運(yùn)行打包運(yùn)行本地調(diào)試的原理相似，只是執(zhí)行命令不一樣，因此config文件夾下面的 build.js? build-all.js 與dev.js 也是相似。build.js 代碼和dev.js 唯一不同的是最后一行 修改成?
build-all.js 就是執(zhí)行循環(huán)打包命令,代碼如圖所示：
第五步：修改運(yùn)行以及打包配置文件
vue官方模板項(xiàng)目中，入口文件main.js的路徑配置是一個(gè)固定的，所以首先要將入口文件改成一個(gè)變化的，我們將webpack.base.conf.jss 做如下修改：
其次就是調(diào)試時(shí)，和打包的配置文件修改，將webpack.dev.conf.js以及webpack.build.conf.js 文件 中的渲染模板的路徑也進(jìn)行如下修改：
最后就是打包的路徑配置修改，將config文件夾下的index.js 中的打包相關(guān)配置做如下修改：
小結(jié)：
本文只是簡單的一個(gè)vue 多項(xiàng)目的一個(gè)配置方案，并不是非常完美，其中有很多地方都可以優(yōu)化，至少我在寫完之后就已經(jīng)想到可以改進(jìn)的地方，其中有很多重復(fù)，另外改動的地方也比較多。如果不想改動這么多的地方，尤其是不想修改執(zhí)行的腳本命令，我的建議是將新建的 dev.js，build.js 直直接在模板默認(rèn)的命令腳本的文件中引入并執(zhí)行。會省下很多代碼。
另外一個(gè)就是，沒有對static 靜態(tài)文件的打包配置進(jìn)行優(yōu)化，因此運(yùn)行打包之后，dist文件下的每一個(gè)項(xiàng)目中都會包含static中的靜態(tài)文件，會浪費(fèi)遠(yuǎn)程機(jī)器硬盤空間。
參考文章：vue+webpack多個(gè)項(xiàng)目共用組件動態(tài)打包單個(gè)項(xiàng)目 - 簡書
附上源碼：項(xiàng)目參考
