您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

前端開發階段 URL 管理：避免硬編碼域名的最佳實踐

編輯：程式設計綜合問答

前端項目在開發、測試、生產環境切換時，API 基礎 URL 常需變更。硬編碼完整域名會導致頻繁修改代碼。本文介紹通用的環境變量配置方案。

問題場景


// 開發環境
const apiUrl = 'https://dev.api.example.com/users';

// 生產環境部署時需手動改為
const apiUrl = 'https://api.example.com/users';

手動修改易出錯，且無法自動化構建。

解決方案：環境變量 + 構建工具注入

方案一：Vite / Webpack 定義全局常量


// vite.config.js
export default defineConfig({
  define: {
    'import.meta.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL)
  }
})

// .env.development
API_BASE_URL=https://dev.api.example.com

// .env.production
API_BASE_URL=https://api.example.com

代碼中使用：


const apiUrl = `${import.meta.env.API_BASE_URL}/users`;

方案二：運行時配置（無需重新構建）


// public/config.js （部署時由運維替換）
window.APP_CONFIG = {
  API_BASE_URL: 'https://api.example.com'
};

// main.js 入口讀取
const API_BASE_URL = window.APP_CONFIG?.API_BASE_URL || '/api'; // 默認相對路徑

Docker/K8s 部署時通過 ConfigMap 掛載不同 config.js。

方案三：相對路徑 + 反向代理（最簡單）


// 開發環境 vite.config.js / webpack.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'https://dev.api.example.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

// 代碼中統一使用相對路徑
fetch('/api/users')  // 開發環境代理到後端，生產環境 Nginx 反向代理

優點： 代碼零配置，環境切換完全由基礎設施層處理。

JavaScript 歷史方案（兼容舊專案）


// config.js
const CONFIG = {
  development: { API_BASE: 'https://dev.api.example.com' },
  production:  { API_BASE: 'https://api.example.com' }
};

// 運行時判斷
const env = location.hostname === 'localhost' ? 'development' : 'production';
const API_BASE = CONFIG[env].API_BASE;

// 使用
const url = `${API_BASE}/users`;

最佳實踐總結

方案	適用場景	優點	缺點
構建時注入	現代項目	類型安全、Tree-shaking、無運行時開銷	環境變更需重構建
運行時配置	容器化部署、多租戶	不重構建切換環境	需額外 HTTP 請求或內聯腳本
相對路徑+代理	單體應用、前後端同域	最簡單、零配置	跨域場景需額外處理