执行npm start后React应用在浏览器中一直加载是什么原因？

问题根源与解决方法 #

1. 浏览器加载失败、HTML语法报错问题 #

你遇到的HTML语法报错和页面加载问题和CRA默认输出的「开发环境构建包未做优化」提示完全无关，该提示是脚手架的通用固定提示，不指向任何故障。
报错的核心原因是错误使用VSCode的Live Server扩展加载Create React App的原始模板文件：
你提供的代码里的%PUBLIC_URL%是CRA内置的模板变量，只有在npm start启动的内置开发服务、或者执行npm run build打包时，才会被自动替换为实际的资源路径。直接用Live Server打开原始的public/index.html文件时，浏览器无法识别该模板变量，会直接当做非法语法解析，因此触发大量报错。
对应解决步骤：

• 开发阶段不要使用Live Server打开项目，执行npm start后直接访问终端输出的默认服务地址（一般为http://localhost:3000）即可
• 如果访问该地址仍然卡顿加载失败，可按以下顺序排查：
  • 打开浏览器无痕窗口访问，排除本地缓存干扰
  • 检查src/index.js入口文件的核心代码是否被误删，确认保留了React挂载到DOM的逻辑
  • 执行npm install重新安装依赖，排除依赖损坏的问题

2. git status列出大量用户文件夹文件问题 #

该问题是因为你误在系统用户根目录执行了git init初始化了Git仓库，正常操作应该是仅在你的React项目文件夹内初始化Git。根目录的Git仓库会干扰CRA开发服务的文件监听逻辑，这也是你之前运行正常、现在npm start启动后页面加载卡住的核心诱因之一。
对应解决步骤：

• 打开Git Bash，执行cd ~进入用户根目录
• 执行rm -rf .git删除根目录错误初始化的Git配置（该操作仅删除Git仓库配置，不会影响你的个人文件）
• 执行cd 你的React项目文件夹路径进入项目目录，再执行git init即可，后续git status就只会展示项目内的文件变动

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