vue cli3 環境變量 模式

vue cli3中使用環境變量和模式

理解模式

模式是 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

也就是說在不做任何設置的情況下:
a、本地運行項目 npm run dev 使用的是development模式，process.env.NODE_ENV="development"
b、打包項目 npm run build 使用的是production模式，process.env.NODE_ENV="production"

如果有其他需求，需自行配置環境變量，則使用以下2步創建並使用
比如：在生產環境中需要使用兩個不同的接口地址，並且使用不同的打包名稱等

1、創建

• 必須在項目根目錄中創建，文件格式如下：

.env 
.env.local
.env.*
.env.*.local

注：
a、代表模式名，英文小寫
b、.local后綴的文件會載入相應模式，但會被git忽略
c、.env 文件在所有的環境中被載入 .env.[模式名] 在指定的模式中被載入
d、環境優先級：.env. > .env

• 一個環境文件只包含環境變量的“鍵=值”對
  如：

# 環境
NODE_ENV = 'production'
# 模塊名
VUE_APP_NAME = 'release'
# 打包文件名
VUE_APP_DIR_NAME = 'test'

注：
a、NODE_ENV 變量可以覆蓋默認值
b、其他變量名VUE_APP_ 前綴開頭（例如上述模塊名或者打包文件名）

2、使用

(1) 構建命令中使用，package.json文件
通過傳遞 --mode 選項參數為命令行覆寫默認的模式

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

注：
–mode XXX名字一定要跟 .env.xxx名字對應起來

(2) 在代碼中使用

let baseUrl=""
if(process.env.NODE_ENV === "production"){ //生產環境
  if (process.env.VUE_APP_NAME === 'release') {
    baseUrl = "正式地址1";
  }else if(process.env.VUE_APP_NAME === 'build'){
    baseUrl = "正式地址2";
  }
}else{ //開發環境
  baseUrl="開發地址"
}
export { baseUrl }

在vue.config.js中配置

// 輸出文件目錄
outputDir:process.env.VUE_APP_DIR_NAME,