【vue-cli3項目開發】快速配置多環境變量

vue-cli3 搭建的項目其實看起來比 cli2 簡單明了很多，官方也有相關文檔對多環境變量配置的描述。
https://cli.vuejs.org/zh/guide/mode-and-env.html

1、首先
通過為 .env 文件增加后綴來設置某個模式下特有的環境變量
通過傳遞 --mode 選項參數為命令行覆寫默認的模式

在項目的根目錄新建3個文件夾，分別對應開發（dev），測試（test），生產（prod）
文件命名： .env.dev , .env.test , .env.prod

接下來是介紹不同文件里面的代碼情況

.env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地開發api地址'

.env.test

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '測試環境api地址'

.env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式環境api地址'

2、修改package.json 腳本

3、編譯

npm run dev        //本地運行
npm run build:test      //測試環境打包
npm run build:pro         //正式環境打包

4、說明

以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

更新詳細信息可以查看官網：https://cli.vuejs.org/zh/guide/mode-and-env.html