部署React应用到GitHub Pages出现Manifest语法错误如何解决？

问题原因 #

核心报错由%PUBLIC_URL%占位符未被React打包工具正常替换导致，浏览器无法识别带占位符的非法URI，同时加载到的异常内容触发manifest语法报错，常见触发场景如下：

• 未在package.json中配置homepage字段，Create React App的%PUBLIC_URL%替换逻辑强依赖该字段的配置
• public/index.html里的manifest引用标签写法错误，手动修改了占位符或者硬写了不匹配的路径
• public目录下的manifest.json本身存在JSON语法错误（比如引号不闭合、逗号缺失等）
• 部署路径和配置的homepage路径不匹配，GitHub Pages默认部署路径为https://<用户名>.github.io/<仓库名>/，路径不匹配会导致资源解析失败

修复步骤 #

• 第一步：在项目根目录的package.json中添加homepage配置，值为你的GitHub Pages实际部署路径：

{
  "name": "meet_app",
  "homepage": "https://<你的GitHub用户名>.github.io/meet_app/",
  // 保留其余原有配置不变
}

• 第二步：检查public/index.html中的manifest引用标签，确保为官方默认写法，不要手动修改占位符：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

• 第三步：校验public/manifest.json的JSON语法，确保没有格式错误
• 第四步：重新执行打包命令npm run build，将新生成的build目录内容重新部署到GitHub Pages即可

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