运行CRA创建的应用时出现/%PUBLIC_URL%/manifest.json URI格式错误如何解决

你遇到的是react-scripts@4.0.3版本的典型模板插值失效问题，env.js能正常识别环境变量，说明变量读取环节没有问题，失效出在HtmlWebpackPlugin的模板替换阶段，触发原因通常为以下几种：

• PUBLIC_URL环境变量配置格式错误，比如加了多余引号、特殊符号，或者配置在了CRA不识别的自定义env文件中，导致模板解析时无法正确读取PUBLIC_URL，连带所有模板插值都不执行
• 项目依赖缓存损坏，导致webpack的模板处理逻辑异常
• public/index.html的模板插值语法被修改，不符合CRA要求的%变量名%格式
• react-scripts@4.0.3本身存在的已知环境变量插值bug，当自定义环境变量数量较多时偶发失效

按以下优先级排查修复：

1. 检查PUBLIC_URL配置

• 若你手动在.env文件中配置了PUBLIC_URL，本地开发场景留空或者设置为/即可，生产环境二级部署场景配置为对应路径，比如/my-app，不要加引号、末尾斜杠或者特殊字符
• 确保PUBLIC_URL和所有REACT_APP_开头的变量都配置在CRA默认识别的env文件中：.env（全局）、.env.development（开发环境）、.env.production（生产环境）、.env.local（本地优先级最高），不要使用自定义命名的env文件除非你启动时明确指定了加载路径。

2. 清除缓存重建依赖
   执行以下命令清理损坏的缓存：

rm -rf node_modules package-lock.json yarn.lock build
npm install

开发环境启动时加上重置缓存参数：

npm run start -- --reset-cache

3. 修复版本兼容问题
   react-scripts@4.0.3存在已知的模板插值bug，可选择两种方案修复：

• 方案1：升级到无bug的兼容版本

npm install react-scripts@4.0.4

升级前做好业务代码兼容测试即可

• 方案2：临时修改现有版本配置
  打开node_modules/react-scripts/config/paths.js，找到getPublicUrlOrPath函数，直接将返回值硬编码为你需要的PUBLIC_URL，比如开发环境设置为'/'

4. 校验HTML模板语法
   打开public/index.html，确认所有环境变量插值都是%变量名%的格式，不要修改为双大括号、$符号等其他模板语法，CRA的HTML模板仅识别百分号包裹的变量格式。

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