vue项目经验：vue-cli3根据不同环境配置打包命令

在vue-cli3的项目中，

npm run serve时会把process.env.NODE_ENV设置为development；

npm run build 时会把process.env.NODE_ENV设置为production；

此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

一、创建环境配置文件

1、.env.development文件（开发环境）

NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_BASE_URL= 开发环境的地址

2、.env或者.env.production文件（生产环境）

NODE_ENV=production
VUE_APP_ENV=production
VUE_APP_BASE_URL= 生产环境的地址

3、新增的环境配置，如测试环境a，创建.env.testa文件

NODE_ENV=production
VUE_APP_ENV=testa
VUE_APP_BASE_URL= 测试环境a的地址

4、新增的环境配置，如测试环境b，创建.env.testb文件

NODE_ENV=production
VUE_APP_ENV=testb
VUE_APP_BASE_URL= 测试环境b的地址

二、设置baseURL

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 6000 // 请求超时时间
})

三、判断不同环境

这一部分有的同学可能用到，有的可能不需要

//判断不同环境
if(process.env.VUE_APP_ENV === 'production'){
    这里是生产环境
}else if(process.env.VUE_APP_ENV === 'testa'){
    这里是testa环境
}else if(process.env.VUE_APP_ENV === 'development'){
    这里是开发环境
}

四、配置打包命令

package.json文件中

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "testa": "vue-cli-service build --mode testa",
    "build:testb": "vue-cli-service build --mode testb",
    "lint": "vue-cli-service lint"
  },

五、执行打包命令

按上面配置完成即可运行打包命令

按生产环境打包

npm run build

按测试环境a打包

npm run testa

按测试环境b打包

npm run build:testb

参考文档

参考文档01