Vue3 + TypeScript 中如何区分开发和生产环境的 API 地址（支持 axios 请求）

在实际项目开发中，我们通常会遇到以下需求：

• 本地开发时访问的是本地 API（如 http://localhost:3000）；
• 上线打包后访问的是正式环境 API（如 https://api.example.com）；

本文将介绍如何在 Vue 3 + TypeScript + Vite 项目中，优雅地使用不同的 API 地址，支持 axios 请求，并通过环境变量配置让项目更清晰、灵活和易维护。

---

🔧 技术栈

• Vue 3
• TypeScript
• Vite 构建工具
• Axios（HTTP 请求库）

---

🚀 项目背景

假设你有一段代码如下：

const response = await axios.get(`http://ip:port/api/download-font/${fontName}`, {responseType: 'blob'
});

这段代码在开发环境可以正常使用，但一旦上线到生产环境，就无法动态切换 API 地址。这将导致部署失败或者前端资源访问错误。

---

✅ 正确做法：使用环境变量动态配置 API 地址

1️⃣ 配置环境变量文件

在项目根目录下创建以下两个文件：

.env.development

VITE_API_BASE_URL=http://localhost:3000

.env.production

VITE_API_BASE_URL=https://api.example.com

💡注意事项：

• 文件名必须是 .env.环境名，对应 vite 中的 mode。
• 变量名必须以 VITE_ 开头，才能在代码中访问。

---

2️⃣ 在代码中使用环境变量

Vite 提供了 import.meta.env 方式访问环境变量：

const response = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/download-font/${fontName}`,{responseType: 'blob'}
);

这样，当你运行 npm run dev 时，会自动使用开发地址；
当你执行 npm run build 时，Vite 会自动加载生产环境配置。

---

3️⃣ 可选优化：封装 Axios 实例

为了代码更加规范，我们可以统一封装一个 axios 实例。

src/utils/axios.ts

import axios from 'axios';const request = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000,
});export default request;

使用方式：

import request from '@/utils/axios';const response = await request.get(`/api/download-font/${fontName}`, {responseType: 'blob'
});

这样即使以后 API 地址变更，也只需修改环境变量即可，项目结构更加清晰。

---

🎯 最终目录结构示例

├── .env.development
├── .env.production
├── src
│   ├── utils
│   │   └── axios.ts
│   ├── views
│   │   └── DownloadPage.vue

---

🛠️ 常见问题

❓为什么要以 VITE_ 开头？

Vite 出于安全性考虑，只会将 VITE_ 开头的变量注入到客户端环境中。否则你定义了环境变量，代码里是访问不到的。

---

📦 构建与运行

• 开发环境：

  npm run dev
  

• 构建生产包：

  npm run build
  

Vite 会根据 NODE_ENV 自动加载对应 .env.xxx 文件。

---

🧠 总结

本文介绍了如何在 Vue 3 + TypeScript 项目中，通过 Vite 的环境变量机制区分开发和生产环境的 API 地址，并结合 axios 统一封装，提高项目的可维护性和扩展性。

📌 不要硬编码 IP 地址，使用 .env 文件配置才是最佳实践！