为什么React中process.env打印为空却可以访问其属性？

• 编译期静态替换机制
  目前React生态常用的构建工具（包括Create React App、Vite、Webpack等），都会通过内置的变量替换能力（如Webpack的DefinePlugin、Vite的define配置）处理环境变量：只有完整匹配process.env.指定前缀_变量名格式的代码，才会在编译阶段被直接替换为对应的环境变量字符串值。符合要求的process.env.REACT_APP_VALUE会被直接替换为你设置的实际值，运行时根本不会访问process.env对象本身。
• 全量process.env对象不会注入前端运行时
  为了避免服务端全量环境变量泄露到前端，构建工具不会把完整的process.env对象打包到前端产物中，只会给浏览器环境注入一个空的process.env对象作为兜底。当你直接打印process.env时，编译期没有命中任何具体属性的替换规则，运行时拿到的就是这个兜底的空对象。

你可以通过查看编译后的前端产物验证逻辑：如果你的源码包含以下两行代码

console.log(process.env.REACT_APP_VALUE)
console.log(process.env)

编译后实际运行的代码等价于：

console.log("你配置的REACT_APP_VALUE实际值")
console.log({})

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