使用create-react-app创建的项目保存App.js后页面无法自动刷新的问题咨询

你遇到的是create-react-app开发模式下热重载失效的典型问题——编译成功但页面没有同步更新，结合你的环境（Node v14.17.0、npm 6.14.13、Windows 10），给你几个实用的排查和解决步骤：

• 确认命令运行目录正确
  一定要确保你是在项目根目录（就是包含src、package.json的my-app文件夹）下执行npm start，如果不小心进入了子目录，文件监听逻辑会失效，自然不会触发页面刷新。

• 强制清除浏览器缓存
  有时候浏览器会缓存旧的页面资源，试试按下Ctrl+Shift+R强制刷新页面；或者打开浏览器开发者工具（F12），在Network面板勾选「禁用缓存」选项，再刷新页面。

• 检查App.js的存放位置
  create-react-app默认只会监听src文件夹内的文件变化，如果你的App.js被放在了src目录外面，修改内容是不会触发热重载的，把它移回src目录即可。

• 清空依赖缓存并重启项目
  依赖缓存损坏或版本冲突也可能导致热重载异常，按以下步骤操作：

  1. 先停止当前的开发服务（按下Ctrl+C）
  2. 删除node_modules文件夹和package-lock.json文件：
     • Windows命令：rd /s /q node_modules 和 del package-lock.json
  3. 重新安装依赖：npm install
  4. 重启开发服务：npm start

• 适配react-scripts版本
  react-scripts 5.x版本对Node环境的兼容性要求更高，你的Node v14.17.0可以试试降级到更稳定的4.x版本：

  npm install react-scripts@4.0.3
  

  安装完成后重启npm start即可。

• 启用文件轮询模式
  Windows系统的文件自动监听偶尔会出现异常，我们可以强制启用轮询来监听文件变化：

  1. 在项目根目录新建一个.env文件
  2. 在文件内添加一行配置：CHOKIDAR_USEPOLLING=true
  3. 重启开发服务

• 排查杀毒软件拦截
  Windows Defender或第三方杀毒软件可能会拦截create-react-app的文件监听功能，暂时关闭杀毒软件试试，或者把你的项目目录加入到杀毒软件的白名单中。

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