cli3+配置测试，生产环境Api接口地址

cli3+配置测试环境与生产环境

由于项目开放环境，生产环境，测试环境api接口地址不同，每次打包时需要手动切换，为此，本文演示如何在打包时自动切换接口地址的方法

npm run dev //调用本地环境api
npm run test //调用测试环境api  测试环境打包
npm run build //调用生产环境api  生产环境打包

1.首先在package.json文件中添加：

"test": "vue-cli-service build --mode test --report"// 测试打包
"publish": "vue-cli-service build --mode prod && vue-cli-service build --mode test" //相当于运行npm run build + npm run test

2.项目根目录下创建 .env.prod文件和.env.test文件

/* .env.prod */
NODE_ENV = production
VUE_APP_API = "http://matmanage.xxxxx"

/* .env.test */
NODE_ENV = production
VUE_APP_MODE = "test"
VUE_APP_API = "http://testmatmanage.xxxxxx"
outputDir = test    // 输出目录

outputDir：打包时的输出目录名字，若需默认输出到dist目录，则可不写该变量

3.在vue.config.js文件中添加：

outputDir: process.env.outputDir //打包目录

配置关系如下图

4.配置请求接口

console.log(process.env);//配置完成后全局可获取process.env
// 根据NODE_ENV判断生产环境和开发环境
if (process.env.NODE_ENV === 'production') {
    // 根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
    if (process.env.VUE_APP_MODE === 'test') {
        // 测试环境
        axios.defaults.baseURL = process.env.VUE_APP_API;//.env.test已经配置路径可以直接赋值
        // axios.defaults.baseURL = 'http://xxxxxx';//.也可以直接将api粘过来，.env.test可以不用写api
    } else {
        // 生产环境
        axios.defaults.baseURL = process.env.VUE_APP_API;// 同上
    }
} else {
    //dev 开发环境
    axios.defaults.baseURL = 'http://xxxxxx';
}

5.success

至此完成生产测试环境api配置