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文件。

項目github地址
項目公網地址

1) vueSSR: 從0到1構建vueSSR項目 --- 初始化
2) vueSSR: 從0到1構建vueSSR項目 --- 路由的構建
3) vueSSR: 從0到1構建vueSSR項目 --- node以及vue-cli3的配置
4) vueSSR: 從0到1構建vueSSR項目 --- vuex的配置（數據預取）
5) vueSSR: 從0到1構建vueSSR項目 --- 開發環境的部署
6) vueSSR: 從0到1構建vueSSR項目 --- 僞熱更新