vue 根据不同命令打包不同接口地址在vue项目中需要前端打包的地址比较多，比如测试环境、生产环境、UAT环境等等，频

在vue项目中需要前端打包的地址比较多，比如测试环境、生产环境、UAT环境等等，频繁的打包需求需要手动切换各个环境的api地址十分麻烦，还很容易在忙乱中选择错误的api地址，尤其是生产环境，一旦上线错误的api地址就是生产事故，因此通过配置不同的打包命令打包不同的api地址尤为重要，不但省事还不容易出错。

1、package.json中添加打包命令：

"scripts": {    "serve": "vue-cli-service serve",    
    "build": "vue-cli-service build",    
    "testbuild": "vue-cli-service build --mode testbuild",    
    "prodbuild": "vue-cli-service build --mode prodbuild",    
    "lint": "vue-cli-service lint"  
},

注意：添加的 "vue-cli-service build --mode 名称" 名称，必须与接下来添加的 ".env.文件名" 文件名相同。

2、在项目根目录添加文件 ".env.testbuild" 和 "env.prodbuild" ，内容分别为：

NODE_ENV = 'production'
VUE_APP_ENV = 'test'

NODE_ENV = 'production'
VUE_APP_ENV = 'prod'

3、在 baseURL 配置的地方添加判断：

let baseURL = process.env.VUE_APP_ENV ? process.env.VUE_APP_ENV == 'test' ? 'http://test.com' : process.env.VUE_APP_ENV == 'prod' ? 'https://prod.com' : 'http://dev.com' : 'http://dev.com'

这样，yarn testbuild 即可打测试环境包， yarn prodbuild 即可打生产环境包。