vue-cli3 webpack多生产环境配置。

首先，在实际项目中并不需要配置多环境的打包，因为通过服务器转发是更加安全的且不会出现跨域问题，不管是nginx，apache，还是docker，都是可以通过太后转发的。前端并不需要写死的地址去请求不同的环境，但是如果通一台服务器有多套前端代码需要转发，就需要通过关键字识别，然后nginx转发，具体通过下文。

## 项目初始化的时候通常只有两个版本development和production。如何再打包时区分环境分别打包呢？当然你可以用注释代码的方法，每次发布都要注释，解注，非常的麻烦。

接下来就介绍如何配置多个生产环境。快速打包

项目初始化的时候，通常默认会有两个版本，开发环境和生产环境
开发环境下：NODE_ENV=development(默认)
生产环境下：NODE_ENV=production(默认)

第一步配置package.json

初始化是这样的

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"

修改之后

"build：pro1": "vue-cli-service build --mode pro1",
"build：pro2": "vue-cli-service build --mode pro2",

下次打包的时候执行 npm run build：pro1 就会寻找跟目录下的env.pro1 读取里面设置的变量

第二步新建env.pro

刚才再json定义了两个新的build 所以我们要在跟目录里新建两个文件 .env.pro1和.env.pro2两个文件

NODE_ENV = 'production'
VUE_APP_SERVER = '47'

文件里可以重新 定义NODE_ENV，也可以新加一个VUE_APP_SERVER ，这在配置baseurl的时候也可以通过VUE_APP_SERVER来判断是需要哪个环境。

第三步根据NODE_ENV或VUE_APP_SERVER 判断环境，来重新定义buseUrl

if (process.env.NODE_ENV == 'development') {
  baseUrl = 'VUE_APP_API_BASE106engine'
} else {
  if(process.env.VUE_APP_SERVER == 'pro1') {
    baseUrl = process.env.VUE_APP_API_BASE106!
  }else if(process.env.VUE_APP_SERVER == 'pro2') {
    baseUrl = process.env.VUE_APP_API_BASE47!
  }else if(process.env.VUE_APP_SERVER == 'pro3') {
    baseUrl = process.env.VUE_APP_API_BASE106engine!
  }else if(process.env.VUE_APP_SERVER == 'pro4') {
    baseUrl = process.env.VUE_APP_API_BASE106br!
  }
}

接下来npm run build：pro1 试试看吧