在CodeSandbox中无法访问环境变量的问题求助

你遇到的核心问题不是process.env.[VAR_NAME]的写法错误，而是CodeSandbox的React项目对环境变量命名有强制要求，具体解决步骤如下：

• 调整环境变量命名规则：在CodeSandbox的环境变量/Secrets设置中，将你的变量名修改为REACT_APP_GOOGLE_MAPS_API_KEY（必须以REACT_APP_作为前缀）
• 更新代码中的变量引用：

  const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
  

• 验证生效：修改完成后，刷新CodeSandbox的预览页面或重启开发容器，确保新的环境变量被正确注入

补充说明 #

CodeSandbox沿用了Create React App的环境变量注入机制：只有以REACT_APP_开头的环境变量会被打包工具（如Webpack）注入到客户端代码中，这样做是为了避免非预期的敏感变量被暴露到前端。你之前硬编码可以运行，说明API密钥本身是有效的，只是变量没被正确注入而已。

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