vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）

只需要三个步骤即可实现根据环境不同而自动改变请求域名的需求，不需手动更改

通过改变process.env.NODE_ENV值区分打包环境，但是webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样；为了消除这种差异，可以使用其他变量比如process.env.VUE_APP_TITLE来区分环境

---

1. package.json中打包命令：

{
  "scripts": {
    "serve": "vue-cli-service serve", //本地运行，会把process.env.NODE_ENV设置为‘development‘
    "alpha": "vue-cli-service build --mode alpha",//设置第二部的文件之后运行此命令会把process.env.NODE_ENV设置为‘production‘
    "build": "vue-cli-service build --mode build"//设置第二部的文件之后运行此命令会把process.env.NODE_ENV设置为‘production‘
  },
}

2. 在项目根目录添加文件“.env.alpha”和“.env.build”，其内容分别为：

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

3. 区分环境：一般在request文件里面配置ajax的地方

//区分环境的变量
var env = process.env.NODE_ENV === 'development' ? 'development' :
    process.env.VUE_APP_TITLE === 'alpha' ? 'alpha' : 'production';
//根据不同环境配置接口请求地址 
if(env==="development"){
  axios.defaults.baseURL = "本地环境域名"
}else if(env==="alpha"){
  axios.defaults.baseURL = "测试环境域名"
}else if(env==="production"){
  axios.defaults.baseURL = "上线环境域名"
}