[@vue/cli & element-ui] 環境變量與模式

1.環境變量的設置

vue-cli3中，經過在根目錄下設置.env[.mode]文件，來設置環境變量。
在文件中，經過 鍵=值 設置不一樣的環境變量。

//.env
VUE_APP_API_BASEURL = 'a.com'

But 只有以VUE_APP_開頭的變量，纔會被webpack.DefinePlugin靜態嵌入到客戶端側的包中，做爲全局變量使用。使用方式爲：

let api = process.env.VUE_APP_API_BASEURL;

2.模式

經過傳遞 --mode 選項參數爲命令行覆寫默認的模式。

//package.json
{
    "scripts": {
        "dev-build": "vue-cli-service build --mode development"
    }
}

能夠經過爲 .env 文件增長後綴來設置某個模式下特有的環境變量。
好比在development模式下，只會加載文件env.development內的環境變量。

3.常見使用場景

切換環境對應的api接口。
好比，在.env.development文件中設置測試環境api的基礎路徑，在.env.production文件中設置生產環境api的基礎路徑。
這樣，經過使用--mode給命令行設置不一樣的模式，就可讓打包好代碼在不一樣環境下切換api基礎路徑。