vueSSR: 從0到1構建vueSSR項目 --- 開發環境的部署

開發環境的部署

開發環境的部署，讓我頭疼了一陣子每次修改代碼都要重新構建這樣很麻煩，最終利用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文件。