【axios封装】面对多个baseurl 如何封装请求方法 多个服务器请求地址_vue axios中的process.env.vue_app_base_api,

一般情况下，我们在项目中全局设置了请求地址。

比如 vue 中，在.env.development文件中可以设置：

# just a flag
ENV = 'development'
 
# base api
VUE_APP_BASE_API = 'http://192.168.0.0：9999' // 服务地址

这样开发时，全局在axios中封装直接设置baseUrl也很方便，比如在 封装axios时候，可以这样：

...
 
// 设置一下就可以了，注意这里是全局设置了服务地址
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
 
 
...

但是后台开发为了自己后台功能模块的区分（有时候可能就是为了自己方便，就是太懒），会提供很多地址，比如

// 接口1
 
http:192.168.0.1:9090/api/xxxxxx
 
// 接口2
 
http:192.168.0.5:8888/api/xxxxxx
 
// 接口3
 
http:192.168.0.1233:4444/api/xxxxxx

看到这一幕的话，作为前端开发真的奔溃了。沟通之后，后台各种理由说不能改正。没办法，这个坑，注定由前端来填。

【解决方案】

既然baseurl都不一样，那么索性在封装axios的时候，就不用设置baseurl了。

...
 
// 设置一下就可以了，注意这里是全局设置了服务地址
 
// 不设置baseurl
// axios.defaults.baseURL = process.env.VUE_APP_BASE_API
 
 
...

然后新建一个文件，我这里叫作baseUrlConfig.js,用来管理所有可能出现的baseUrl地址。比如

// baseURlConfig.js
 
export baseUrls = {
    base1: 'http://192.168.1.1:1111',
    base2: 'http://192.168.2.1:2222',
    base3: 'http://192.168.3.1:3333',
    base4: 'http://192.168.4.1:4444',
    base5: 'http://192.168.5.1:5555',
 
 
    ..... 
};

然后在具体的接口使用的时候，引入对应的baseurl即可，比如：

// 比如是一个请求list的接口,用到的是一个 base2 这个服务地址
 
 
 
 
// 引入封装好的axios
import axios from '@request'
 
// 引入baseUrlConfig
import {baseUrl} from '@/request/baseUrlConfig';
 
// 看看用哪一个baseUrl base2 这个服务地址
const base2 = baseUrl.base2;
 
// 开始接口封装了
export const getList = params => {
    return axios.post(`${base2}/api/getList`)
} 
 

暂时这么处理吧。