@vue/cli(vue脚手架3)区分打包build文件 测试环

vue cli3没有了和之前vue cli2一样的配置文件，
但项目中 经常会有测试环境和生产环境，经常不同环境的域名是不一致的，因为build构建打包时，process.env.NODE_ENV默认是production的生产环境，所以我们每次build都去手动更改请求域名，很麻烦。。。
但我们又不能直接去更改process.env.NODE_ENV等于test来区分是测试环境，这样打包出来的包结构和production打包出来的是不一样的。如图：

image.png

这个才是正常的：

image.png

解决：
在根目录下创建两个.env的文件，.env.build是生产环境，.env.test是测试环境，两个文件的【NODE_ENV】都= ‘production’
用另一个变量【VUE_APP_CURRENTMODE】 来区分环境
VUE_APP_CURRENTMODE = ‘test’
VUE_APP_CURRENTMODE = ‘production’

image.png
image.png

代码build：

第一种
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'production';

第二种
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

2.test截图

image.png

test代码

第一种
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'

第二种
NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

3.域名根据变量【VUE_APP_CURRENTMODE】 来区分:

image.png

在src里面新建一个util文件，里面建一个baseUrl.js
代码如下

第一种
let PATH_IMG;
if(process.env.NODE_ENV=='development'){//开发环境
  PATH_IMG='http://192.168.207.21:8766'
}else if(process.env.VUE_APP_CURRENTMODE=='production'){//生产环境
  PATH_IMG='http://ann.yto.net.cn:18766'
}else if(process.env.VUE_APP_CURRENTMODE=='test'){ //测试环境
  PATH_IMG='http://192.168.207.21:8766'
}

export {PATH_IMG};

第二种
const PATH_IMG_IP_DEV = 'http://192.168.207.21:8766';   //开发环境
const PATH_CAPI_IP_PROD = 'http://ann.yto.net.cn:18766';   //生产环境
const PATH_IMG_IP_TEST = 'http://192.168.207.21:8766';   //测试环境图片域名

let NODE_ENV = process.env.NODE_ENV;
let VUE_APP_TITLE = process.env.VUE_APP_TITLE;
let PATH_IMG = '';

if (NODE_ENV == 'development') {//开发环境
    PATH_IMG = PATH_IMG_IP_DEV;
} else if(NODE_ENV == 'production') {//
    switch(VUE_APP_TITLE){
        case 'test':
            PATH_IMG = PATH_IMG_IP_TEST;
            break;
        case 'production':
            PATH_IMG = PATH_CAPI_IP_PROD;
            break;
        default:
            PATH_IMG = PATH_CAPI_IP_PROD;
            break;
    }
}
export {PATH_IMG};

4.然后再package.json里面配置

image.png

代码如下

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode production",//注意这里一定是production（不管是第一种方式还是第二种方式这里都这样配置）
    "build": "vue-cli-service build --no-clean --mode production",//注意这里一定是production（不管是第一种方式还是第二种方式这里都这样配置）
    "lint": "vue-cli-service lint"
  },

5。再那个页面用就再那个页面引入

image.png
image.png