Vue项目中实现多数据源切换的关键是为每个后端服务创建独立、可复用、互不干扰的Axios实例，避免共用全局实例导致token冲突、拦截器混杂等问题；需按服务封装实例、使用工厂函数动态生成、业务层按需导入、环境配置分离管理。
Vue 项目中实现多数据源切换，关键在于为每个后端服务创建**独立、可复用、互不干扰**的 Axios 实例，而不是共用一个全局实例或强行修改 baseURL。这样能避免 token 冲突、拦截器逻辑混杂、超时/headers 配置错乱等问题。
按服务划分独立实例
不同后端服务（如用户中心、订单系统、文件服务、第三方支付网关）往往有各自的域名、鉴权方式、超时策略和错误约定。应为每个服务单独封装一个 axios 实例：
- 在 src/utils/request/ 下新建
userApi.js、orderApi.js、fileApi.js等文件 - 每个文件内部调用
axios.create()创建专属实例，并配置其baseURL、timeout、headers - 例如
userApi.js中：import axios from 'axios' const userInstance = axios.create({ baseURL: import.meta.env.VITE_USER_API_BASE_URL, timeout: 12000, headers: { 'X-Service': 'user-center' } }) // 添加该服务专用的请求/响应拦截器（如用户 token 注入） userInstance.interceptors.request.use(config => { const token = localStorage.getItem('userToken') if (token) config.headers.Authorization = `Bearer ${token}` return config }) export default userInstance
统一工厂函数动态生成实例
当服务数量较多或需运行时动态切换（如租户隔离、灰度环境），可用工厂函数替代硬编码多个文件：
- 定义
src/utils/request/factory.js，导出createRequest工厂函数 - 传入配置对象（
baseURL、name、beforeRequest等），返回定制化实例 - 组件内按需调用：
const paymentApi = createRequest({ baseURL: 'https://pay.example.com', name: 'payment' }) - 工厂函数天然支持复用拦截器逻辑，只需差异化参数，无需重复写拦截器代码
业务层按需导入，不污染全局
避免挂载到 Vue.prototype 或 app.config.globalProperties，防止命名冲突和隐式依赖：
立即学习“前端免费学习笔记（深入）”；
- 在具体业务模块（如
src/api/user/index.js）中直接import userApi from '@/utils/request/userApi' - 封装语义化方法：
export function getUserInfo(id) { return userApi.get(`/users/${id}`) } - 组件中只引入所需 API 方法，解耦清晰，Tree-shaking 友好
- 测试时可轻松 mock 特定服务实例，不影响其他请求链路
环境与配置分离管理
多数据源的地址、是否启用、备用域名等，应从环境变量或配置中心读取，而非写死在代码中：
- 使用
VITE_USER_API_BASE_URL、VITE_ORDER_API_BASE_URL等环境变量区分服务地址 - 在
.env.development中定义：VITE_USER_API_BASE_URL=http://localhost:8081 - 生产环境可通过部署时注入变量或配置接口动态拉取，实现零代码发布切换
- 对高可用场景，可在工厂函数中内置 fallback 机制（如主域名失败自动切备用域名）
