四种axios中引入多个baseURL的解决方案

最新推荐文章于 2025-04-09 15:17:04 发布

路过的老王

最新推荐文章于 2025-04-09 15:17:04 发布

阅读量1.2w

点赞数 8

分类专栏： FE小知识文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wj_love_wj/article/details/123007150

版权

FE小知识专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了在Vue项目中使用axios处理多个不同baseURL的策略。推荐方案是利用axios的请求拦截器，根据请求配置动态设置baseURL，避免了创建多个axios实例带来的代码冗余。此外，还提到了不使用baseURL、使用对象键值对等其他方案，适用于不同的项目阶段和需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案1 使用请求拦截器（推荐）

适用场景：产品后期迭代新引入后端模块，base地址不同。
栗子：
setp1：明确vue环境变量中的baseURL地址

NODE_ENV = production
VUE_APP_BASE_URL = /app/api
VUE_APP_URL_TWO= /two
VUE_APP_URL_THREE= /three

step2：修改axios请求拦截

// 创建 Axios 实例
const axiosInstance: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL
});
// 请求拦截器
axiosInstance.interceptors.request.use((config) => {
    if(config.requestBase=='VUE_APP_BASE_URL'){
        config.headers['Content-Type']="application/x-www-form-urlencoded"; 

    }else if(config.requestBase=='VUE_APP_URL_TWO'){
        config.headers['Content-Type']="application/json";
        config.baseURL=process.env.VUE_APP_URL_TWO; // 取到环境变量：baseURL
        config.data=JSON.stringify(config.data);  

    }else if(config.requestBase=='VUE_APP_URL_THREE'){
        config.baseURL=process.env.VUE_APP_URL_THREE;
    }
    return config;
});

step3: 发起请求时按需传递requestBase的配置即可，可参考

const {data, code} = await request.get<{time: number}>(ROOT_SYSTEM_TIME_URL, 
{}, // 携带的参数
{ requestBase:'VUE_APP_URL_THREE'} // 携带的配置
);

方案2 使用多个axios实例（不推荐）

适用场景：产品后期迭代新引入后端模块，base地址不同。
弊端：代码冗余大。

// 创建 Axios 实例 1
const axiosInstance1: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_ONE
});

// 创建 Axios 实例 2
const axiosInstance2: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_TWO
});

// 创建 Axios 实例 3
const axiosInstance3: Instance = axios.create({
    timeout: 15000,
    baseURL: process.env.VUE_APP_BASE_URL_THREE
});

方案3 不使用baseURL

适用场景：产品开发前期，不明确多少个base地址。

export const SYSTEM_TIME_URL = '/app/api/system/time'; // 地址写全即可

方案4 使用对象键值对指代base地址

适用场景：产品开发前期，明确了多个base。若处于项目后期，则不推荐。

export const requestBase = {
	base_url_one: '/one/xxx',
	base_url_two: '/two/xxx',
}

import requestBase from 'xxx';
export const SYSTEM_TIME_URL = `${requestBase.base_url_one}/app/api/system/time`; // 地址写全即可