Vue 3 中统一管理接口地址的核心是环境变量+封装实例+动态baseURL，使用Vite的VITE_前缀变量（如VITE_API_BASE_URL）配合多环境文件、axios实例封装及请求拦截器实现多后端动态切换，避免硬编码和NODE_ENV误判。
Vue 3 中统一管理不同环境的接口地址，核心是「环境变量 + 封装实例 + 动态 baseURL」三者结合，避免硬编码、提升可维护性。关键不在写死地址，而在让构建过程自动识别当前环境并注入对应域名。
用 Vite 环境变量控制 baseURL
Vite 推荐使用 import.meta.env.VITE_API_BASE_URL（必须以 VITE_ 开头才能暴露给客户端）。在项目根目录下创建对应环境文件：
- .env.development：VITE_API_BASE_URL="https://dev-api.example.com"
- .env.staging：VITE_API_BASE_URL="https://staging-api.example.com"
- .env.production：VITE_API_BASE_URL="https://api.example.com"
封装 axios 实例时直接读取：
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000
})
请求拦截器中按需覆盖 baseURL（多后端场景）
当项目对接多个服务（如用户中心、订单系统、文件服务），可在请求配置中加标识字段，拦截器动态切换：
立即学习“前端免费学习笔记（深入）”；
- 调用时传入自定义字段：
request.get('/user/list', { baseURL: 'user' }) - 拦截器中匹配并替换：
service.interceptors.request.use(config => {
const baseMap = {
user: import.meta.env.VITE_USER_API,
order: import.meta.env.VITE_ORDER_API,
file: import.meta.env.VITE_FILE_API
}
if (baseMap[config.baseURL]) {
config.baseURL = baseMap[config.baseURL]
}
return config
})
避免常见错误：不要用 NODE_ENV 判断环境
process.env.NODE_ENV 只有 development / production 两种值，无法区分测试、预发等中间环境。Vite 的 VITE_ 前缀变量才是为多环境设计的标准方式。若强行用 NODE_ENV 分支判断，会导致 staging 环境误走 production 地址，上线后才发现接口 404。
打包命令与环境联动
在 package.json 中配置不同脚本，自动加载对应 .env 文件：
-
"dev": "vite"→ 默认加载 .env.development -
"build:staging": "vite build --mode staging"→ 加载 .env.staging -
"build:prod": "vite build --mode production"→ 加载 .env.production
执行 npm run build:staging 时，Vite 会把 VITE_API_BASE_URL 替换为 staging 地址，生成的静态资源中 baseURL 已固化，无需运行时判断。
