如何在React运行时检测开发与生产模式且不暴露全部process.env变量

方案1：仅注入所需的单个环境变量（适用于Create React App或类似脚手架） #

如果用Create React App这类预设Webpack配置的脚手架，不用手动改复杂配置，只需用带特定前缀的环境变量（比如CRA的REACT_APP_前缀），这类变量会被单独注入客户端，而非整个process.env对象。

开发环境终端设置：

# Windows（cmd）
set REACT_APP_ENV=development

# Windows（PowerShell）
$env:REACT_APP_ENV="development"

# macOS/Linux
REACT_APP_ENV=development npm start

生产环境构建时设置：

REACT_APP_ENV=production npm run build

代码中仅判断该变量：

if (process.env.REACT_APP_ENV === 'development') {
  // 开发环境逻辑
  console.log('当前是开发环境');
} else {
  // 生产环境逻辑
  console.log('当前是生产环境');
}

客户端只会拿到REACT_APP_ENV这一个变量，不会泄露其他敏感的process.env内容。

方案2：通过HTML meta标签注入环境标识（零构建配置修改） #

完全不用碰构建工具配置，只需在不同环境的index.html里添加一个隐藏meta标签：

开发环境public/index.html：

<meta name="app-environment" content="development" style="display: none;" />

生产环境部署时，将该标签改为：

<meta name="app-environment" content="production" style="display: none;" />

React代码中运行时读取值：

const getCurrentEnv = () => {
  const envMeta = document.querySelector('meta[name="app-environment"]');
  return envMeta ? envMeta.getAttribute('content') : 'production'; // 默认生产环境
};

const currentEnv = getCurrentEnv();
if (currentEnv === 'development') {
  // 开发环境逻辑
} else {
  // 生产环境逻辑
}

该方案无需修改任何构建配置，仅需维护两份index.html或部署时替换标签内容，非常简便。

方案3：利用开发服务器端口特征（仅限个人/内部项目） #

如果开发环境固定使用某个端口（比如3000），可直接通过window.location.port判断：

const isDevelopment = window.location.port === '3000';

if (isDevelopment) {
  // 开发环境逻辑
} else {
  // 生产环境逻辑
}

此方案可靠性较低，端口变更后会失效，仅适合个人项目或内部固定环境使用。

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