如何在React中用.env隐藏API key？GitHub Pages部署是否生效？

首先明确，.env的核心作用是把环境相关配置和业务代码分离，避免硬编码，不是从技术层面"加密"密钥。不同脚手架的实现规则有区别：

• 通用前置要求

  • .env文件必须放在项目根目录，和package.json同级，不要放在src等业务代码目录下
  • 必须把.env加入.gitignore配置，禁止将该文件提交到Git仓库
  • 修改.env文件后必须重启本地开发服务，新的环境变量才会生效

• 基于Create React App（CRA）搭建的项目

  1. 根目录新建.env文件，所有自定义环境变量必须以REACT_APP_为前缀，否则脚手架不会识别注入，示例配置：

  REACT_APP_OPENWEATHER_KEY=你的实际API密钥
  REACT_APP_API_BASE=https://api.openweathermap.org
  

  2. 业务代码中通过process.env对象读取变量，示例调用：

  const getWeather = async (city) => {
    const resp = await fetch(
      `${process.env.REACT_APP_API_BASE}/data/2.5/weather?q=${city}&appid=${process.env.REACT_APP_OPENWEATHER_KEY}`
    )
    return resp.json()
  }
  

  3. 如果需要区分开发、生产环境，可以分别创建.env.development、.env.production文件，脚手架会在对应运行/打包模式下自动加载对应文件的配置。

• 基于Vite搭建的React项目

  1. 根目录新建.env文件，所有自定义环境变量必须以VITE_为前缀，示例配置：

  VITE_OPENWEATHER_KEY=你的实际API密钥
  VITE_API_BASE=https://api.openweathermap.org
  

  2. 业务代码中通过import.meta.env对象读取变量，示例调用：

  const getWeather = async (city) => {
    const resp = await fetch(
      `${import.meta.env.VITE_API_BASE}/data/2.5/weather?q=${city}&appid=${import.meta.env.VITE_OPENWEATHER_KEY}`
    )
    return resp.json()
  }
  

  3. 同样支持按开发/生产/测试等模式创建对应.env.[mode]文件，Vite会自动匹配加载。

把API Key存在.env文件里的方式，在GitHub Pages这类纯静态托管平台上没有真正的隐藏效果。
原因很简单：React是纯客户端运行的前端应用，不管你怎么配置环境变量，打包构建的时候所有引用到的环境变量都会被直接内联替换到最终输出的静态JS文件里。任何能访问你站点的用户，只要打开浏览器开发者工具，要么看接口请求的参数，要么翻打包后的静态JS资源，几分钟就能拿到明文的API Key。你不把.env提交到GitHub仓库，只是避免了别人直接翻你公开源码仓库拿到key，防不住站点访问者。

针对GitHub Pages这类纯静态托管场景，更可靠的API Key保护方案按优先级排序：

• 最优方案：加一层后端代理做请求转发
  把API Key存在后端服务的环境变量里，前端不再直接请求第三方API，而是请求你自己的后端接口，由后端携带真实密钥去请求第三方服务，再把结果返回给前端。这种方案下前端完全接触不到真实密钥，从根源上避免泄露。个人项目没必要单独买服务器搭后端，用免费额度的Serverless云函数就能实现，部署成本极低。
• 次选方案：给API Key配置来源域名白名单
  如果对应的第三方API服务支持配置调用来源限制，就把你的GitHub Pages专属域名加到白名单里。就算别人扒到了你的Key，也没法在其他域名下直接调用，能大幅降低密钥被盗刷的风险。注意这个方案不是绝对安全，有经验的人可以通过伪造请求Referer头绕过限制，只是提高了盗刷门槛。
• 底线提醒：所有涉及付费、有调用额度限制、关联个人账号权益的API Key，绝对不要直接暴露在前端代码里，不管是硬编码、存.env、还是做代码混淆压缩都没用——只要是送到用户浏览器里运行的静态资源，用户总有办法拿到里面的明文内容，这类场景必须走后端代理。

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