vue-ci3 環境變量

一個項目前端開發過程當中，通常會經歷本地開發，測試腳本， 開發自測 ，測試環境 ，預上線環境 才能正式發佈。對應每一個環境均可能有所差別，如 服務器地址，後臺接口地址等。因此在環境切換時，就須要不一樣的配置參數，這時候就能夠使用環境變量和模式，來方便咱們管理。

vue-cli3總共提供了四種方式來指定環境變量

1.在根目錄添加.env文件，配置全部狀況下都會用到的配置（不知道這個存在的意義，全部的都須要的也就不須要配置了吧）。
2.在根目錄添加.env.local文件，配置全部狀況下都會用到的配置，與.env的區別是隻會在本地，該文件不會被git跟蹤。
能夠在這文件下，設置開發api接口和rap接口

3.在根目錄添加.env.[mode]文件，配置對應某個模式下的配置,好比：.env.development來配置開發環境的配置。

4.在根目錄添加.env.[mode].local文件，配置對應某個模式下的配置,與.env.[mode]的區別也只是會在本地生效，該文件不會被git跟蹤。

環境加載優先級：同一個key: .env.[mode].local > .env.[mode] > .env

在運行命令時爲NODE_ENV賦值，去設置此時運行的應用的環境模式。
每一個模式都會將NODE_ENV的值設置爲模式的名稱——好比在 development 模式下 NODE_ENV 的值會被設置爲 "development"

默認狀況下Vue Cli項目有三種模式，

development：在vue-cli-service serve下，即開發環境使用
production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式環境使用
test： 在vue-cli-service test:unit下使用

在package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",  // vue-cli-service serve --mode development，不帶mode參時默認是開發環境
    "build": "vue-cli-service build",  // vue-cli-service build --mode production，不帶mode參時默認是生產環境
    "lint": "vue-cli-service lint",
   
    //本身新建一個模式：須要在項目根目錄新建.env.stage1文件，在.env.stage1文件裏聲明變量
    //會在 stage1 模式下加載可能存在的 .env、.env.stage1 和 .env.stage1.local 文件而後構建出生產環境應用。
    "stage1" :"vue-cli-service serve --mode stage1"
  },
}

 

環境變量：

在.env文件中，只有以VUE_APP_開頭的變量會被webpack.DefinePlugin靜態嵌入到客戶端側的包中。環境變量必須以VUE_APP_開頭。

 

示例：