我們開發(fā)是經(jīng)常需要用到多個環(huán)境的，例如本地開發(fā)環(huán)境、線上測試環(huán)境、線上生產(chǎn)環(huán)境等等。不同環(huán)境api的域名不一樣、可能跳轉(zhuǎn)的網(wǎng)頁地址也不一樣，每次打包的時候手動更改不僅麻煩且容易出錯。在這方面，vue-cli給我們提供了多個環(huán)境的使用。

env文件

env文件是vue-cli的環(huán)境配置文件，位于項目的根文件夾里，里面的變量需以 VUE_APP_ 開頭。

VUE_APP_BASE_API = '/work/api/tea/'
VUE_APP_ADMIN_HOST = 'https://xxx/'

env文件在vue-cli中的應(yīng)用

env.或者env.production 是 vue-cli-service build 的默認(rèn)配置。
env.development 是 vue-cli-service serve 的默認(rèn)配置。
env.{name} 需要我們在命令后面指定：--mode {name} 。

為了方便，我們修改package.json文件

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "custom": "vue-cli-service build --mode {name}",
    "lint": "vue-cli-service lint"
}

如此，我們打包的時候只需要執(zhí)行相應(yīng)的命令就可以了。

npm run custom