菜鸟教程
教程 axios tutorial

在多环境中配置不同 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，可以减少手动修改接口地址的错误，提高项目上线和测试的效率。

相关内容