如何为开发环境与生产环境使用独立的reCAPTCHA密钥

下面是几种实用的落地方式，适配不同项目场景：

1. 使用多环境专属.env文件（推荐） #

绝大多数现代前端/后端框架（如Vite、Create React App、NestJS）都支持按环境自动加载对应.env文件，操作步骤如下：

• 在项目根目录创建多个.env文件：
  • .env.development：存放开发环境配置

    RECAPTCHA_SITE_KEY=你的开发环境站点密钥
    

  • .env.production：存放生产环境配置

    RECAPTCHA_SITE_KEY=你的生产环境站点密钥
    

  • （可选）.env.local：本地开发私有配置，不会提交到版本库
• 框架会根据运行环境自动匹配加载：
  • 启动开发服务（如npm run dev）时，自动加载.env.development
  • 构建生产包（如npm run build）时，自动加载.env.production
• 代码中直接读取统一变量名即可：

  // Vite 项目
  const recaptchaKey = import.meta.env.VITE_RECAPTCHA_SITE_KEY;
  // Create React App 项目
  const recaptchaKey = process.env.REACT_APP_RECAPTCHA_SITE_KEY;
  // Node.js/Express 项目（需配合 dotenv 包）
  require('dotenv').config();
  const recaptchaKey = process.env.RECAPTCHA_SITE_KEY;
  

2. 单.env文件区分环境变量 #

如果不想维护多个.env文件，可在单个文件中定义多环境密钥，再通过代码判断环境切换：

• 在.env中添加两组密钥：

  RECAPTCHA_SITE_KEY_DEV=你的开发环境站点密钥
  RECAPTCHA_SITE_KEY_PROD=你的生产环境站点密钥
  

• 代码中根据当前环境选择对应密钥：

  // 判断环境（Node.js/前端框架通用逻辑）
  const isProduction = process.env.NODE_ENV === 'production';
  const recaptchaKey = isProduction 
    ? process.env.RECAPTCHA_SITE_KEY_PROD 
    : process.env.RECAPTCHA_SITE_KEY_DEV;
  

• 需在启动脚本中明确指定环境变量，比如package.json：

  "scripts": {
    "dev": "NODE_ENV=development node app.js",
    "start": "NODE_ENV=production node app.js"
  }
  

3. 后端动态加载配置（适用于全栈/服务端渲染项目） #

如果是后端主导的项目，可借助工具包自动匹配环境配置：

• 安装dotenv-flow包，它会根据NODE_ENV自动加载对应.env文件：

  npm install dotenv-flow --save
  

• 在项目入口文件引入：

  require('dotenv-flow').config();
  const recaptchaKey = process.env.RECAPTCHA_SITE_KEY;
  

关键注意事项 #

• 所有.env相关文件必须添加到.gitignore，防止密钥泄露到版本库
• 注意框架的环境变量前缀要求（如Vite需VITE_开头，Create React App需REACT_APP_开头）

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