vue-cli3 多环境使用的配置方法

我们开发是经常需要用到多个环境的，例如本地开发环境、线上测试环境、线上生产环境等等。不同环境api的域名不一样、可能跳转的网页地址也不一样，每次打包的时候手动更改不仅麻烦且容易出错。在这方面，vue-cli给我们提供了多个环境的使用。

env文件

env文件是vue-cli的环境配置文件，位于项目的根文件夹里，里面的变量需以 VUE_APP_ 开头。

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

env文件在vue-cli中的应用

env.或者env.production 是 vue-cli-service build 的默认配置。
env.development 是 vue-cli-service serve 的默认配置。
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"
}

如此，我们打包的时候只需要执行相应的命令就可以了。

npm run custom