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     //正式環境打包