ReactJS应用部署至GitHub Pages后fetch失效及页面白屏问题求助

1 fetch功能本地正常、部署后报错排查 #

• 优先核对请求路径适配性：GitHub Pages部署后的应用运行在二级路径下，本地开发默认运行在根路径，若fetch请求写为根路径开头的绝对路径（如/api/xxx），部署后会请求根路径下的资源而非二级路径下的目标资源，触发404错误。可将请求路径改为相对路径，或拼接React内置的process.env.PUBLIC_URL变量，写法参考：fetch(${process.env.PUBLIC_URL}/api/xxx)。
• 核对跨域配置：本地开发时devServer可配置代理转发跨域请求，部署到GitHub Pages后无代理层，若fetch调用的是第三方外部接口，会直接触发CORS跨域错误。需改为后端代理实现请求，或确认目标接口允许当前部署域名的跨域访问。
• 核对资源路径大小写：GitHub Pages的文件系统大小写敏感，Windows、macOS本地开发环境默认大小写不敏感，路径大小写不匹配时本地不会报错，部署后会触发404，需确认请求的目标资源路径与仓库内实际文件的大小写完全一致。

2 页面白屏排查 #

• 核对package.json的homepage配置：部署到GitHub Pages二级路径的React应用必须配置homepage字段，取值为你的GitHub Pages应用的访问地址，配置错误会导致打包后静态资源路径指向错误，资源加载失败触发白屏。
• 核对资源加载状态：打开浏览器开发者工具的Network面板，刷新页面查看是否有js、css等核心静态资源加载失败的报错，若存在则按上述路径规则修正资源引用配置。
• 核对JS语法兼容问题：本地开发用的浏览器版本通常支持最新JS语法，若未配置babel兼容规则，打包后的代码在部分低版本浏览器中会执行报错，中断页面渲染导致白屏。可打开开发者工具Console面板查看是否有JS执行错误，根据错误信息调整babel编译配置。
• 核对路由配置：若应用使用了React Router等路由库，部署在二级路径下需要给路由组件设置basename属性，取值为二级路径名称，写法参考：<BrowserRouter basename='/PyOcr'>，否则路由匹配不到对应路径会渲染空白内容。

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