如何获取react环境变量

获取 React 环境变量的方法

在 React 项目中，环境变量通常用于存储配置信息（如 API 密钥、环境标识等）。以下是几种常见的获取方式：

使用 process.env

React 项目通过 create-react-app 创建时，环境变量需以 REACT_APP_ 前缀命名，否则会被忽略。例如：

const apiKey = process.env.REACT_APP_API_KEY;
console.log(apiKey); // 输出环境变量值

.env 文件配置

在项目根目录创建 .env 文件，定义环境变量：

REACT_APP_API_KEY=your_api_key_here
REACT_APP_ENV=development

重启开发服务器后，变量可通过 process.env 访问。

不同环境的变量文件

针对不同环境（开发、测试、生产），可使用以下文件：

• .env.development：开发环境
• .env.test：测试环境
• .env.production：生产环境

变量会根据当前运行环境自动加载。

通过 npm scripts 注入变量

在 package.json 中，可通过脚本注入变量：

"scripts": {
  "start": "REACT_APP_ENV=development react-scripts start",
  "build": "REACT_APP_ENV=production react-scripts build"
}

自定义环境变量加载

如需更灵活的控制，可安装 dotenv 库并在代码中手动加载：

require('dotenv').config();
const customVar = process.env.CUSTOM_VAR;

注意：此方法需在 Node 环境中使用，浏览器端仍需通过 REACT_APP_ 前缀。

验证变量是否存在

为避免未定义变量导致错误，可添加默认值：

const apiUrl = process.env.REACT_APP_API_URL || 'https://default.api';

注意事项

• 敏感信息（如密码）不应直接存储在客户端环境变量中，应通过后端服务中转。
• 修改 .env 文件后需重启开发服务器。
• 生产环境构建时，环境变量会被嵌入到静态文件中，可通过 npm run build 生成。