# 在多环境中配置不同 baseURL

URL: https://caijiao.org/axios/instance/env-config
Source: docs/axios/instance/env-config.md
Description: 本章节讲解如何在 Axios 中根据不同环境（开发、测试、生产）配置不同的 baseURL，结合环境变量实现前端项目请求的灵活管理和自动切换，提高项目可维护性。

在前端项目中，不同环境通常对应不同的后端服务地址，通过 Axios 配置环境变量可以实现灵活切换。

## 1. 使用环境变量配置 baseURL

```javascript
import axios from "axios";

// 根据环境变量设置 baseURL
const baseURL = import.meta.env.VITE_API_BASE_URL || "https://api.example.com";

const api = axios.create({
  baseURL,
  timeout: 7000,
});

export default api;
```

在 Vite 项目中，可以在 `.env` 文件中定义不同环境的变量：

```dotenv
# .env.development
VITE_API_BASE_URL=https://dev.api.example.com

# .env.test
VITE_API_BASE_URL=https://test.api.example.com

# .env.production
VITE_API_BASE_URL=https://api.example.com
```

## 2. 根据 NODE_ENV 动态切换

```javascript
const baseURL =
  process.env.NODE_ENV === "production"
    ? "https://api.example.com"
    : "https://dev.api.example.com";

const api = axios.create({ baseURL });
```

## 3. 使用示例

```javascript
api
  .get("/users/123")
  .then((res) => console.log("用户数据：", res.data))
  .catch((err) => console.error("请求失败：", err));
```

## 4. 优势

- **环境隔离**：开发、测试、生产接口互不影响；
- **自动切换**：根据环境变量自动使用对应 baseURL；
- **统一管理**：便于在 CI/CD 流程中管理不同环境配置。

---

> 💡 小提示：通过多环境配置 baseURL，可以减少手动修改接口地址的错误，提高项目上线和测试的效率。