React (6) 加入環境變數

發表於 分類於
在 Create React App 加入環境變數

環境變數

React 通常通過 .env 文件來定義環境變數。需要注意的是，React 中的環境變數名稱必須以 REACT_APP_ 開頭。例如：

1
2
3
# .env 文件
REACT_APP_API_URL=https://api.example.com
REACT_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXXXXX-X

在你的 React 代碼中，可以通過 process.env 來訪問這些變數：

1
2
const apiUrl = process.env.REACT_APP_API_URL;
console.log('API URL:', apiUrl);

不同環境的 .env 文件

  • .env：適用於所有環境
  • .env.local：適用於本地環境，但不會提交到版本控制系統（應該加入 .gitignore）
  • .env.development：僅適用於開發環境 (npm start 時使用)
  • .env.production：僅適用於生產環境