当前位置：首页 > 经验笔记 > VUE > 正文内容

vue-cli3.x不同环境打包运行不同api接口及打包后动态配置API地址

han32685年前 (2020-07-03)VUE4173

今天接到一个测试反馈说“我能不能我直接打包测试环境项目不用手动去改API”我第一反应就是这个测试这么懒！改个API都嫌麻烦,但是仔细一想毕竟"懒惰使人进步"嘛！

开干！

添加测试环境：

vue-cli3.x默认只有开发环境和生产环境

自己可以增加命令，有了开发环境和生产环境就增加测试环境就行了

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

增加之后就命令就变成：

运行开发环境：npm run serve

运行测试环境：npm run test

打包测试环境：npm run test-build

打包开发环境：npm run build

请使用powershell命令工具运行 vscode报错

命令增添好了这么判断不同模式不同API呢？

console.log(process.env.NODE_ENV)

可以运行不同模式打印“process.env.NODE_ENV”里面是什么内容我这里就演示了

默认的：

production //是生产环境

development //是开发环境

我们新增的 test //是测试环境

不同环境判断不同接口：

在你自己封装的api接口里面去判断我这里写在main.js里面

if(process.env.NODE_ENV === 'production'){//生产环境地址
      axios.defaults.baseURL = 'http://192.168.1.200:8082/'
    }else if(process.env.NODE_ENV === 'development'){//开发环境地址
      axios.defaults.baseURL = 'http://192.168.1.200:8082/'
    }else{//测试环境地址
      axios.defaults.baseURL = 'http://192.168.1.200:8082/'
    }

这样就实现了打包不同环境使用不同API接口了

我们还可以配置 vue.config.js 设置打包测试环境和生产环境在不同目录

代码如下：

 outputDir: process.env.NODE_ENV === "test" ? "testdist" : "dist"

不知道vue.config.js看看官方文档吧！直达车-》

项目打包后如何修改API接口：

有的时候我们项目已部署在线上了更换服务器或者其他操作需要更换前端API接口

重新build打包一遍上传部署也是很麻烦建一个配置文件直接修改已在线上项目！

步骤如下：

public文件夹下新建apiconfig.js内容如下

window.gurl={
    AXIOS_TIMEOUT:10000,
    SERVICE_CONTEXT_PATHAPI:'http://192.168.1.200:8082/',
}

index.html引入此js文件

<script type="text/javascript" src="./apiconfig.js"></script>

判断接口修改为

if(process.env.NODE_ENV === 'production'){//生产环境地址
      axios.defaults.baseURL = 'http://192.168.1.200:8082/'
    }else if(process.env.NODE_ENV === 'development'){//开发环境地址
      axios.defaults.baseURL = window.gurl.SERVICE_CONTEXT_PATHAPI
    }else{//测试环境地址
      axios.defaults.baseURL = 'http://192.168.1.200:8082/'
    }