api接口应集中管理，即统一存放于src/api目录下，按模块组织在modules子文件夹中，且全部封装为函数调用；通过request.js封装axios实例、index.js统一导出，结合环境变量动态配置baseurl，提升可维护性与可扩展性。
把 API 接口从组件里抽出来、集中管理，核心就三点：统一存放路径、按模块组织接口、通过函数调用而非字符串拼接。这样改一个地址、加个参数、换套鉴权逻辑，都不用满项目搜代码。
建好 api 目录结构，别堆在 utils 或随便一个 js 里
在 `src/` 下新建 `api/` 文件夹，里面放三类文件： - `request.js`：封装 axios 实例（含拦截器、超时、baseURL、token 自动注入） - `modules/` 子文件夹：按业务拆分，比如 `user.js`、`order.js`、`product.js` - `index.js`：统一导出所有模块，作为唯一入口比如 src/api/modules/user.js 写成：
import request from '@/api/request'
export const login = (data) => request.post('/auth/login', data)
export const getUserInfo = () => request.get('/user/profile')
export const updateAvatar = (formData) => request.post('/user/avatar', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
每个接口都封装成函数，不暴露 URL 字符串
禁止在组件里写 `axios.get('/api/v1/user?id=123')` 这种硬编码。 所有请求必须走封装好的函数，比如： ```js // ✅ 正确：调用函数，参数和路径已解耦 import { getUserInfo } from '@/api/modules/user' await getUserInfo()// ❌ 错误：URL 和逻辑混在一起，无法复用、难维护 axios.get('/api/v1/user?uid=123')
好处是：后端路径改了，只改 `user.js` 里那一行；加统一 header，只在 `request.js` 拦截器里加；要 mock 数据，也只 stub 这个函数。
<h3>用 index.js 统一导出，按需引入不污染全局</h3>
`src/api/index.js` 写成：
```js
export { login, getUserInfo, updateAvatar } from './modules/user'
export { getOrderList, cancelOrder } from './modules/order'
export { searchProducts, getProductDetail } from './modules/product'
组件里直接按需导入：
import { getUserInfo, login } from '@/api'
不用 import api from '@/api' 然后 api.user.login() 这种多一层嵌套，扁平化更直观，tree-shaking 也更干净。
环境变量控制 baseURL，开发/测试/生产自动切换
`request.js` 中的 `baseURL` 别写死，从环境变量读： ```js const request = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || '/api', timeout: 10000 }) ``` 然后在 `.env.development` 里写： ``` VITE_API_BASE_URL=https://dev-api.example.com ``` `.env.production` 里写： ``` VITE_API_BASE_URL=https://api.example.com ``` 这样构建时自动替换，不用手动切地址。不复杂但容易忽略
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
