前言
??眾所周知，一個(gè)項(xiàng)目在開(kāi)發(fā)、測(cè)試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過(guò)指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過(guò)官方也提供了相應(yīng)的配置方法。
可以在項(xiàng)目根目錄中放置下列文件來(lái)指定環(huán)境變量：
# 在所有的環(huán)境中被載入
.env
# 只在指定的模式中被載入 如：development、production
.env.[mode]
# 在文件名末尾添加 .local 時(shí)，載入情況同上，但在git中會(huì)被忽略
.env[.[mode]].local
不過(guò)請(qǐng)注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開(kāi)頭的變量將會(huì)被vue載入到項(xiàng)目編譯后的靜態(tài)代碼中，這是為了避免意外公開(kāi)機(jī)器上可能具有相同名稱的私鑰。
| 命令 | 默認(rèn)環(huán)境 | 配置 |
|---|---|---|
| vue-cli-service serve | development | .env.development |
| vue-cli-service test:unit | test | .env.test |
| vue-cli-service test:e2e | production | .env.production |
| vue-cli-service build | production | .env.production |
| vue-cli-service xxx --mode [mode] | [mode] | .env.[mode] |
測(cè)試：
配置文件
# /.env.production
NODE_ENV=production
WELCOME=我是來(lái)自$NODE_ENV的WELCOME
VUE_APP_WELCOME=歡迎光臨，我是來(lái)自$NODE_ENV的VUE_APP_WELCOME
# /.env.development
NODE_ENV=development
WELCOME=我是來(lái)自$NODE_ENV的WELCOME
VUE_APP_WELCOME=謝謝惠顧，我是來(lái)自$NODE_ENV的VUE_APP_WELCOME
頁(yè)面調(diào)用:
console.log('')
console.log(`NODE_ENV`)
console.log(process.env.NODE_ENV)
console.log('')
console.log(`WELCOME`)
console.log(process.env.WELCOME)
console.log('')
console.log(`VUE_APP_WELCOME`)
console.log(process.env.VUE_APP_WELCOME)
console.log('')
當(dāng)配置mode為development時(shí)，頁(yè)面調(diào)用結(jié)果如下：
development
當(dāng)配置mode為production時(shí)，頁(yè)面調(diào)用結(jié)果如下：
production
總結(jié)
該配置方法簡(jiǎn)單快速，不像之前的版本需要在js中配置對(duì)象；同時(shí)變量名必須符合NODE_ENV，BASE_URL 或以 VUE_APP_ 開(kāi)頭的規(guī)范
如有錯(cuò)誤，歡迎指出，謝謝
