vue - 環境變量和模式

1.在項目根目錄中創建.env 或者 .env.xxx 的文件來指定環境變量

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
.env.dev            # 指定開發模式dev
.env.prod           # 指定生產模式prod
.env.test # 指定測試模式test

注：以.local結束的文件會被忽略，是因為忽略文件.gitignore文件設置了

.env.local
.env.*.local

2.環境文件的優先級

為一個特定模式准備的環境文件 (例如 .env.production) 將會比一般的環境文件 (例如 .env) 擁有更高的優先級。

不會被 .env 文件覆寫。

3.一個環境文件只包含環境變量的“鍵=值”對

例如：.env.test文件的配置可如下

# 環境
NODE_ENV = 'test'
# 接口地址
VUE_APP_BASE_API = '/api'
# 打包文件名
VUE_APP_DIR_NAME = 'test'

4.模式

（1）模式與環境變量是和關系？

　　模式！= 環境變量

　　一個模式可以包含多個環境變量

（2）模式如何添加呢？

　　.env 文件增加后綴來設置某個模式

如.env.test文件的后綴名是test,即為test模式 。  test模式下含有NODE_ENV ，VUE_APP_BASE_API ，VUE_APP_DIR_NAME 這3個環境變量，如有需要，可自行添加其他環境變量

5.使用

（1）構建命令中使用開發環境變量

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

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "dev": "vue-cli-service serve --mode dev",    
    "test": "vue-cli-service build --mode test"   
  },

注：--mode 后面跟的名字一定要跟 .env.xxx 的名字對應起來才能實現不同的命令用不同的配置文件

（2）客戶端代碼中使用

const instance = axios.create();

// instance.defaults.baseURL = baseurl;
instance.defaults.baseURL = process.env.VUE_APP_BASE_API;
instance.defaults.timeout = 2000;

 

//設置打包后的目錄名  
outputDir:process.env.VUE_APP_DIR_NAME,