vue cli 自定義環境變數(Environment Variables)

Willy
Dec 9, 2021

--

在我們開發網頁時,常常會有不同的設定,所以需要更多的環境變數設定,這時候我們就可以在 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,在執行一次。就正常了。

npm run deploy

官方文件

官方文件

--

--

Willy
Willy

Written by Willy

前端修練筆記本,記錄一些踩雷及學習過程,希望能順便幫助一些,在學習或開發路上卡關的人們。

No responses yet