部署在GitHub Pages的React应用显示空白页求助

GitHub Pages空白页问题排查 #

1. 路由配置检查
   如果你的应用使用了React Router，必须配置basename匹配仓库路径。示例代码：

   <BrowserRouter basename="/banking-app">
     {/* 你的路由组件 */}
   </BrowserRouter>
   

   或者改用HashRouter，规避GitHub Pages不支持前端路由刷新的限制：

   import { HashRouter } from 'react-router-dom';
   
   <HashRouter>
     {/* 你的路由组件 */}
   </HashRouter>
   

2. 资源路径验证
   本地执行npm run build后，打开build文件夹内的index.html，检查CSS、JS文件的引用路径是否为/banking-app/static/...格式。若路径异常，可尝试将homepage改为相对路径后重新构建部署：

   "homepage": "./"
   

3. 分支与Pages设置确认

   • 执行npm run deploy后，检查仓库的gh-pages分支是否生成，且包含完整的build文件夹内容。
   • 进入GitHub仓库「Settings-Pages」页面，确认「Source」设置为gh-pages分支的/root目录，保存后等待几分钟再访问页面。

Vercel构建失败问题排查 #

结合常见的Vercel构建错误，可从以下几点排查：

1. Node版本兼容
   在项目根目录添加.nvmrc文件，指定与本地开发一致的Node版本（示例：v18.17.0）；或在Vercel项目设置的「Build & Development Settings」中手动设置Node版本。

2. 依赖安装问题
   确认package-lock.json或yarn.lock已提交到仓库；若使用pnpm，需在Vercel设置中指定包管理器为pnpm。

3. Build脚本有效性
   确保package.json中的build脚本为react-scripts build（create-react-app默认配置），若自定义了构建逻辑，需保证脚本能在无本地环境依赖的情况下正常执行。

内容的提问来源于stack exchange，提问作者Anthony Renzo Ferrer