React.js使用动态键无法读取process.env环境变量如何解决

问题原因 #

React项目的前端代码运行在浏览器环境，不存在原生的process全局对象，你能直接读取到process.env.XXX是构建工具（Webpack/Vite等）在打包阶段做了静态字符串替换：

• 硬编码写死的process.env.TEST_ENV会被直接替换成.env文件中对应的值
• 动态的process.env[myKey]不会被构建工具识别匹配，无法完成替换，运行时自然返回undefined

解决方案 #

方案1：预定义环境变量映射表（最稳妥，无配置成本） #

把所有需要用到的环境变量提前写到一个映射对象里，之后就可以用动态键从映射对象读取：

// 提前枚举所有需要用到的环境变量
const ENV_MAP = {
  TEST_ENV: process.env.TEST_ENV,
  TEST_ENV_1: process.env.TEST_ENV_1,
  // 其他需要的变量继续追加即可
}

const myKey = 'TEST_ENV';
const myENV = ENV_MAP[myKey];
console.log(myENV); // 正常输出对应值

方案2：构建配置注入完整环境变量对象（适合变量较多的场景） #

如果需要用到的环境变量很多，不想手动写映射表，可以修改构建配置，把过滤后的环境变量整合成对象注入到前端，注意必须过滤只保留前端需要的公开变量，避免泄露敏感信息。

Webpack/Create React App 配置

如果是CRA项目需要先执行npm run eject暴露配置，再修改webpack配置：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 只保留REACT_APP_前缀的环境变量注入，避免泄露敏感后端变量
      'process.env': JSON.stringify(
        Object.fromEntries(
          Object.entries(process.env).filter(([key]) => key.startsWith('REACT_APP_'))
        )
      )
    })
  ]
}

Vite 配置

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    // 只保留VITE_前缀的环境变量注入
    'process.env': JSON.stringify(
      Object.fromEntries(
        Object.entries(import.meta.env).filter(([key]) => key.startsWith('VITE_'))
      )
    )
  }
})

配置完成后就可以直接用process.env[动态键]读取对应值。

注意事项 #

永远不要把后端敏感环境变量（如密钥、数据库密码等）注入到前端代码，所有注入到前端的环境变量都是公开可查的。 #

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