開發環境的部署
開發環境的部署,讓我頭疼了一陣子每次修改代碼都要重新構建這樣很麻煩,最終利用node腳本解決了這個問題。
思路
使用node執行腳本文件 調用 “npm命令” 來進行執行命令,然後監聽需要監聽的文件,發生改動時,則重新執行腳本。
效果就是代碼改動保存時,就會進行重新構建,瑕疵就是無法自動刷新瀏覽器(思路已經想好了)
構建完成,或者代碼改動構建完成時瀏覽器刷新
構建完成時,刷新瀏覽器的思路(這個我就不做了)
當完成構建利用WebSocket向前端發送通信然後執行reload。就實現了每次構建完成時刷新瀏覽器。
當前環境 判斷 process.env.NODE_ENV即可。
實現代碼
根目錄創建bin
// vuessr/bin/index.js
var npm = require('npm');
//看不懂,就打印下npm 就懂了。
npm.load(function(){
//一定要清除。
npm.commands.cache(['clean'], function(){
npm.commands.run(['serve'])
});
})
//package.json
"scripts": {
//node腳本執行的命令
"serve": "npm run build && node nodeScript/index",
//開發環境服務
"serve:client": "node nodeScript/index",
"build": " npm run build:server -- --silent && npm run build:client -- --no-clean --silent",
//打包客戶端代碼
"build:client": "vue-cli-service build",
//打包服務端使用的json
"build:server": "cross-env VUE_NODE=node vue-cli-service build",
//開發環境
"start": "cross-env NODE_ENV=development nodemon bin/index",
//本地測試服務器的環境
"start:server": "cross-env NODE_ENV=production nodemon nodeScript/index",
//服務器
"pm2": " cross-env NODE_ENV=production pm2 start nodeScript/index.js --watch"
}
vuessr到這裏就完結了。
總結,坑很多,就不一一列舉了。
瑕疵: 開發環境,代碼修改時重新構建也會重啓服務,暫時沒有思路怎麼只重新構建不重啓服務。(不想開兩個cmd窗口)。
問題來源: 開啓node服務必須要等到代碼構建完畢,否則node服務是會報錯的,因爲需要依賴代碼構建完成後的json文件。