vue-cli3 多环境开发

vue-cli3 搭建配置项目比 cli2 简单明了很多。官方文档

1.首先：
通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式

在项目的根目录新建3个文件夹，分别对应开发（dev），测试（test），生产（prod）
文件命名： .env.dev,.env.test , .env.prod
首先根据环境不同配置不同配置

.env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURLA = 'http://****.****.com/javaapi/'
VUE_APP_BASEURLB = 'http://****.****.com/api'
VUE_APP_ID = '1985812757'

.env.test

NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURLA = 'http://****.****.com/javaapi/'
VUE_APP_BASEURLB = 'http://****.****.com/api'
VUE_APP_ID = '1985812757'

.env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURLA = 'http://****.****.com/javaapi/'
VUE_APP_BASEURLB = 'http://****.****.com/api'
VUE_APP_ID = '1985812757'

然后在package.json 脚本中设置

"scripts": {
    "=========== 本地环境命令===========": "",
    "serve": "vue-cli-service serve  --open  --mode dev",
    "build": "vue-cli-service build  --mode dev",
    "=========== 测试环境命令===========": "",
    "serve:test": "vue-cli-service serve  --open  --mode test",
    "build:test": "vue-cli-service build  --mode test",
    "=========== 线上环境命令===========": "",
    "serve:prod": "vue-cli-service serve  --open  --mode prod",
    "build:prod": "vue-cli-service build  --mode prod",
    "lint": "vue-cli-service lint"
  },

最后启动

npm run serve  //本地运行
npm run build  //本地环境打包
npm run build:test //测试环境打包
npm run build:prod  //线上环境打包