Vue 3 中 Axios 实例应配置环境变量驱动的 baseURL 和 10 秒超时，并统一使用相对路径调用；跨域需开启 withCredentials 并配合后端 CORS 支持。
在 Vue 3 项目中封装 Axios 时，基础请求路径（baseURL）和超时时间（timeout）是创建实例阶段就该确定的核心配置，直接决定所有请求的默认行为。
基础路径：用环境变量隔离开发与生产
不要硬编码域名或路径。推荐从 .env 文件读取，例如：
-
VITE_APP_BASE_API=/api（开发环境，配合 Vite proxy 转发） -
VITE_APP_BASE_API=https://api.example.com（生产环境）
创建实例时直接引用：
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000
})
超时时间：设为 10 秒较稳妥
6 秒太短，容易误判弱网场景；30 秒又太长，影响用户体验。10 秒是多数业务的合理平衡点：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 接口本身响应慢，应优化后端而非延长前端超时
- 用户等待超过 10 秒大概率已失去耐心，需主动提示或重试
- 可在具体请求中临时覆盖，如上传大文件可设为
timeout: 60000
注意 baseURL 的实际生效逻辑
baseURL 只对相对路径起作用。以下两种写法效果不同：
-
service.get('/user')→ 实际请求baseURL + '/user' -
service.get('https://other.com/data')→ 完全忽略 baseURL，直连外部地址
所以统一用相对路径调用，才能真正享受 baseURL 带来的环境切换便利。
别漏掉 withCredentials（跨域带 Cookie）
如果登录态靠 Cookie 维持，且前后端跨域，必须显式开启：
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000,
withCredentials: true
})
同时后端需配置 CORS 允许凭证，否则浏览器会静默拒绝响应。
