React 快速判断当前环境

在 React 应用中,经常需要区分开发环境和生产环境。以下是简洁的判断方法:

// 判断是否为开发环境
const isDev = process.env.NODE_ENV !== 'production';

// 使用示例
if (isDev) {
  console.log('当前是开发环境');
}

封装 Hook 方便复用:

const useEnvironment = () => {
  return {
    isDev: process.env.NODE_ENV !== 'production',
    isProd: process.env.NODE_ENV === 'production',
    nodeEnv: process.env.NODE_ENV
  };
};

// 组件中使用
const { isDev } = useEnvironment();

Vite 项目略有不同:

// Vite 使用 import.meta.env
const isDev = import.meta.env.DEV;

通过环境变量控制不同环境的 API 地址、日志输出等,避免手动修改配置。这是现代前端开发的通用实践。

posted @ 2026-02-12 21:51  马瑞鑫03  阅读(16)  评论(0)    收藏  举报