vue cli4.0 如何設定環境變數

2022-03-29 13:01:20

1.建立不同環境變數檔案

如官方檔案所說，通過為.env檔案增加字尾來設定某個模式下特有的環境變數。我這裡有5個環境，所以設定了5個.env檔案。如下圖：

基本格式如下：

NODE_ENV=環境名稱VUE_APP_URL=對應的環境地址

如我本地環境的設定就如下圖所示：

我本地是用的easy-mock模擬的資料，所以設定的地址是mock介面地址。

如官方檔案所說，可以通過傳遞--mode來設定不同的模式。我自己的專案設定如下圖：

請注意我組態檔中的 serve與 build 。

檔案已建立好，設定語句也已寫好。怎麼用它呢？

首頁你需要哪個環境，就執行哪個環境的命令語句。

比如我現在需要local環境，就執行npm run local-serve。如下圖所示：

然後通過process.env.NODE_ENV獲取環境名；通過process.env.VUE_APP_URL獲取環境對應的url。

比如我們在axios請求中，就可以把它的baseURL設定為process.env.VUE_APP_URL，如下圖所示：

後面的"/web"是根據我自己介面來的，你別也寫個"/web"。

如果你不確定你自己現在是在哪個環境變數下，可以console.log("當前環境變數："+process.env.NODE_ENV)和console.log("當前環境路徑："+process.env.VUE_APP_URL)看下。

像我的專案中就是下面這2個東東：

輸出的內容就是.env.local檔案裡面設定的環境變數。

為了更好的理解，我們再執行一條語句，npm run serve,看看此時的環境變數是哪個？

為什麼呢？

因為npm run serve預設指向.env.developement，我在裡面設定的環境就是上面輸出的內容。.env.developement的設定如下圖：

總而言之就是，你需要哪個環境變數，就【npm run對應的環境變數】就完事了！

關於vue cli4.0設定環境變數就講到這裡了~~以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。