如何获取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生成。
