vue中環境變量的使用與配置講解

Posted on by

為什麼需要配置環境變量和模式呢？

所有方法肯定是來源於現實的需求。在一個產品的前端開發過程中，一般來說會經歷本地開發、測試腳本、開發自測、測試環境、預上線環境，然後才能正式的發佈。

對應每一個環境可能都會有所差異，比如說用戶訪問資源權限、服務器地址、接口地址等。在各個環境切換的時候，就需要不同的配置參數，所以就可以用環境變量和模式，來方便我們管理。

環境變量

1）環境變量文件分類

在vue-cli3中可以在根目錄（與package.json同級）中創建以下四種類型的環境變量文件：

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 隻在指定的模式中被載入
.env.[mode].local   # 隻在指定的模式中被載入，但會被 git 忽略

值得註意的是，為一個特定模式準備的環境文件的（如：.env.production）將比一般的環境文件（如：.env）擁有更高的優先級。

2）環境變量配置

每一個環境變量文件中隻包含環境變量的“鍵=值”對，所配置的變量中隻有以VUE_APP_開頭的變量才會被webpack.DefinePlugin靜態嵌入到客戶端側包中，如：

VUE_APP_PERMISSION = true

3）環境變量訪問

被載入和變量將會對vue-cli-service的所有命令、插件和依賴可用。在應用代碼中通過process.env.[變量名]進行訪問，從而獲取到它的值，如下：

if (isDev()) {
    return process.env.VUE_APP_PERMISSION === "true" ? true : false;
  }

除瞭 VUE_APP_ 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：

  • （1）NODE_ENV ：會是 “development”、“production” 或 “test” 中的一個。具體的值取決於應用運行的模式。
  • （2）BASE_URL ：會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

所有解析出來的環境變量都可以在 public/index.html 中使用，如下：

<link rel="icon" href="<%=%20BASE_URL%20%>favicon.ico" rel="external nofollow"  />

模式

1）模式分類

在vue-cli中默認情況下有以下三種模式

  • development 模式：用於 vue-cli-service serve
  • production 模式：用於 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式：用於 vue-cli-service test:unit

模式與環境變量不同，一個模式可包含多個環境變量（NODE_ENV），每個模式都會將NODE_ENV的值設為模式的名稱。

2）模式定義與使用

你可以通過為 .env 文件增加後綴來設置某個模式下特有的環境變量。比如，如果你在項目根目錄創建一個名為 .env.development 的文件，那麼在這個文件裡聲明過的變量就隻會在 development 模式下被載入。

也可以通過傳遞 –mode 選項參數為命令行覆寫默認的模式。

例如，如果你想要在構建命令中使用開發環境變量，則需在 package.json 腳本中設置：

"build": "vue-cli-service build --mode development"

結合實際應用

針對我們公司的項目來說，每個項目都設置瞭三種模式，分別為development、production和permission。我們都知道前兩個是vue-cli項目中默認有的模式，那麼permission模式便是我們在項目上自定義的，為什麼要自定義這個模式呢？

作為非產品設計和開發人員，我們或許並不是很清楚這個模式產生的根本原因，那麼我們先來看看項目上是怎麼配置和應用這個模式，從而來瞭解它的作用。

首先在package.json添加一種類型，並修改默認環境變量為permission環境變量:

在根目錄下創建.env.permission文件，來定義變量和值：

如上圖所示，定義瞭一個.env.permission文件，並在該文件中設置VUE_APP_PERMISSION變量，並為其復制為true。（ 在src文件夾下的任意文件中都可以關聯到process.env.NODE_ENV環境變量）

然後找到該變量引用的地方，如下所示：

從上圖便可看出，VUE_APP_PERMISSION環境變量影響著該系統是否開啟運維模式，即權限管理模式。當系統通過yarn permission命令運行時，則進入權限控制模式，需要進行登錄驗證，並根據登錄用戶獲取相應的資源。

這裡需要特別註意的是，每種環境變量隻有在所對應的模式被編譯執行的時候才能被讀取，也就是說，如果我在permission模式下執行編譯，那就隻能讀取該模式下的變量，而不能讀取development和production或其他模式中所設置的環境變量。所以如果在開發模式下進行編譯，那麼就無法讀取到permission模式下的VUE_APP_PERMISSION變量。這也保證瞭不同模式編譯結果的唯一性。

由此可見，當我們執行yarn serve的時候走的是development模式，而該模式中並未定義VUE_APP_PERMISSION環境變量，所以isPermission()為false，即不走權限控制。所以如果要走權限控制，對資源進行權限管理，那麼就需要對permission模式進行編譯。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：