vue項目使用.env文件配置全局環境變量

模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：

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

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, 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue-环境变量和模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。