如何隐藏React应用中“下载React DevTools”的控制台提示？

这个提示默认只在开发环境出现，生产环境正常打包部署后不会显示，但如果想在开发环境也关掉，或者确认生产环境配置，按你的项目类型对应操作：

Create React App (CRA) 项目 #

• 开发环境禁用：在项目入口文件src/index.js最顶部（导入React之前）添加以下代码：

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
  

  这样就能屏蔽DevTools提示，也不会影响其他开发功能。
• 生产环境：直接执行npm run build打包，CRA会自动移除所有开发环境相关的提示信息，部署后不会看到这个内容。

Vite 项目 #

• 开发环境禁用：在src/main.jsx（或main.tsx）的最顶部添加代码：

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
  import React from 'react';
  // 后续的导入和渲染代码
  

• 生产环境：执行npm run build构建生产包，Vite默认会剔除开发日志，部署后无提示。

手动配置Webpack的项目 #

• 开发环境：两种方式任选其一：
  1. 在入口文件开头添加和上面一样的全局变量代码；
  2. 在webpack.config.js的plugins里添加DefinePlugin配置：

     const webpack = require('webpack');
     
     module.exports = {
       // 其他配置...
       plugins: [
         new webpack.DefinePlugin({
           '__REACT_DEVTOOLS_GLOBAL_HOOK__.isDisabled': JSON.stringify(true)
         })
       ]
     };
     

• 生产环境：确保webpack配置中mode设置为production，React会自动关闭所有开发提示。

另外要注意：如果你的生产环境还是出现了这个提示，大概率是打包时不小心用了开发环境配置，检查下打包命令对应的环境变量是否正确（比如NODE_ENV=production）。

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