在我們開發網頁時,常常會有不同的設定,所以需要更多的環境變數設定,這時候我們就可以在 package.json
中增加設定:
這次我們想要新增deploy變數,來進行最後發佈的打包工作。前面的deploy就是指令 npm run deploy
而中間的vue-cli-service build 就是執行後要運行的動作,因為我們行為是跟原先build一樣,只是需要的環境變數不同,所以中間指令就不用換,而最後--mode deploy
就是要對應的環境變數檔案。
接著我們就很開心的打上npm run deploy
執行完後發現好像怪怪的,檔案非常的大,且css檔直接消失了。
npm run deploy
這是想說我就打原先的npm run build
去比對,照理來說都是執行vue-cli-service build 沒道理不一樣。
npm run build
結果執行完還真的不一樣,這到底是哪裡出了問題......找了很一陣子,終於在官方文件中找到:
意思也就是說,你要在環境變數文件設定NODE_ENV,他會影響到一些打包的設定,假如沒設定他就會自動抓mode的模式對應,因為我們沒有設定,所以build的時候,就會變成對應我們自己增加的mode也就是deploy,而webpack不知道deploy的相關設定,所以build之後才會變成很奇怪。
.env.deploy
所以我們就在.env.deploy
中加上對應的NODE_ENV=production,在執行一次。就正常了。