在全棧開(kāi)發(fā)過(guò)程中兼蕊，前后端分別采用vue-cli腳手架與node.js開(kāi)發(fā)。開(kāi)發(fā)時(shí)我們首先要啟動(dòng)node.js后臺(tái)項(xiàng)目产禾，再啟動(dòng)vue項(xiàng)目，這樣十分麻煩妄痪。
解決方案
項(xiàng)目目錄
client文件夾為前端部分楞件，其余為node后端部分土浸，二者均有一個(gè)package.json文件。
細(xì)心點(diǎn)會(huì)發(fā)現(xiàn)還有package-lock.json文件黄伊，這個(gè)貌似和package.json文件很像啊毅舆。
其實(shí)package-lock就是鎖定安裝時(shí)的包版本號(hào)，需要上傳到git上憋活，以保證其他人在install時(shí)候悦即，大家的依賴版本相同。package.json文件只能鎖定大版本辜梳，即版本號(hào)的第一位作瞄，不能鎖定后面的小版本，你每次npm install時(shí)候拉取的該大版本下面最新的版本乌庶，相信不少人踩過(guò)類(lèi)似的坑契耿。
一般為了穩(wěn)定性考慮我們不能隨意升級(jí)依賴包，因?yàn)槿绻麚Q包導(dǎo)致兼容性bug出現(xiàn)很難排查透敌，所以package-lock.json就是來(lái)解決包鎖定不升級(jí)問(wèn)題的。
那我們想升級(jí)package-locak.json里面的庫(kù)包淌山，該如何操作呢顾瞻？
執(zhí)行如下命令即可，@后面為包的版本號(hào)
npm install XXX@x.x.x
介紹完了前后端項(xiàng)目的目錄退渗，接下來(lái)是前后端連載的方案：
1.安裝concurrently模塊
確保當(dāng)前路徑在node項(xiàng)目的package.json同目錄下蕴纳，執(zhí)行
cnpm install concurrently
2.配置vue項(xiàng)目的package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "npm run serve"`
},
修改package.json文件如上古毛，添加了 "start": "npm run serve"
3.配置node項(xiàng)目的package.json
"scripts": {
"client-install": "npm install --prefix client",
"client": "npm start --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
修改package.json文件如上，關(guān)鍵在于"dev": "concurrently \"npm run server\" \"npm run client\""嫂冻。
[nodemon用來(lái)監(jiān)視node.js應(yīng)用程序中的任何更改并自動(dòng)重啟服務(wù),非常適合用在開(kāi)發(fā)環(huán)境中]
4.切換至node項(xiàng)目
執(zhí)行
npm run dev
此時(shí)即可同時(shí)啟動(dòng)后端與前端項(xiàng)目
若報(bào)錯(cuò)塞椎，可刪除node_module文件夾重新執(zhí)行cnpm install
快速刪除node_module文件夾方法：
- 安裝（推薦全局安裝）：
cnpm install -g rimraf - 使用：
cd xxx [the folder which includes node_modules folder]
rimraf node_modules
