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 文件配置才是最佳實踐！