关于.env多环境API配置的技术咨询及疑问求解

嘿，我完全理解你的困惑——从Spring Boot的多环境配置模式转过来，dotenv的官方建议确实容易让人摸不着头脑。咱们一步步拆解，帮你搞定React项目的多环境API端点配置问题：

先搞懂dotenv那两个“反常识”建议 #

官方的说法其实是安全最佳实践的导向，不是绝对的硬性规则，咱们可以灵活调整：

• “请勿提交.env文件”：核心是怕你把生产/UAT环境的敏感信息（比如密钥、数据库密码）提交到代码仓库。但本地、测试环境的非敏感配置完全可以提交，甚至可以提交.env.example作为模板，同事拉取代码后直接复制修改就能用。
• “应该只保留一个.env文件”：这是针对单环境开发的简化场景，实际多环境项目中，我们完全可以用带环境后缀的.env文件来区分不同环境，dotenv和create-react-app都支持这种方式。

具体实现步骤 #

1. 创建多环境配置文件 #

在项目根目录下创建对应环境的.env文件，注意：React中环境变量必须以REACT_APP_开头，否则不会被注入到应用中（这是create-react-app的内置规则）：

• .env.development（本地开发）：

  REACT_APP_API_URL=http://localhost:8080
  

• .env.test（集成测试）：

  REACT_APP_API_URL=http://test-server:8080
  

• .env.uat（UAT环境）：

  REACT_APP_API_URL=http://uat-server:8080
  

• .env.production（生产环境）：

  REACT_APP_API_URL=http://myprodServer
  

2. 修改package.json的scripts命令 #

create-react-app默认只识别development、test、production三个环境，UAT这类自定义环境需要借助env-cmd包来加载指定配置文件：

• 先安装依赖：

  npm install env-cmd --save-dev
  

• 修改scripts配置：

  "scripts": {
    "start": "react-scripts start", // 默认加载.env.development
    "start:test": "env-cmd -f .env.test react-scripts start",
    "start:uat": "env-cmd -f .env.uat react-scripts start",
    "build": "react-scripts build", // 默认加载.env.production
    "build:test": "env-cmd -f .env.test react-scripts build",
    "build:uat": "env-cmd -f .env.uat react-scripts build",
    "test": "react-scripts test" // 默认加载.env.test
  }
  

这样你就能通过npm run start:test启动测试环境，npm run build:uat构建UAT环境的包了。

3. 在应用中优雅访问配置 #

可以封装一个配置文件统一管理，比如创建src/config.js：

const config = {
  API_URL: process.env.REACT_APP_API_URL
};

export default config;

之后在组件中导入使用：

import config from './config';

// 直接用config.API_URL访问端点
console.log(config.API_URL);

4. 合理处理git提交 #

在.gitignore中配置规则，平衡共享性和安全性：

• 提交.env.development、.env.test（共享非敏感配置）
• 忽略.env.uat、.env.production（这些配置直接放在对应服务器上，或者用CI/CD变量注入）
• 可选：提交.env.example作为模板，方便同事快速创建自己的本地配置

额外说明 #

create-react-app本身会根据NODE_ENV自动加载对应后缀的.env文件：

• 执行npm start时，NODE_ENV=development，自动加载.env.development
• 执行npm run build时，NODE_ENV=production，自动加载.env.production
• 执行npm test时，NODE_ENV=test，自动加载.env.test
  只有UAT这类自定义环境需要用env-cmd手动指定配置文件。

这样既符合安全最佳实践，又实现了像Spring Boot那样的多环境配置需求，完美适配你的场景～

内容的提问来源于stack exchange，提问作者Phate