Vite React带路由应用部署至GitHub Pages后显示空白页求助

• 检查package.json的homepage字段
  必须设置为你的GitHub Pages地址："homepage": "https://gilbertkrantz.github.io/UniPal/"，缺少该字段会导致React构建时使用绝对路径，引发资源加载失败。

• 适配GitHub Pages路由规则
  若使用React Router，将BrowserRouter替换为HashRouter。GitHub Pages不支持SPA的非哈希路由，刷新页面会返回404，HashRouter通过#维护路由状态，不会触发服务器请求。

• 确认部署脚本与分支配置

  1. 安装gh-pages依赖：npm install gh-pages --save-dev
  2. 在package.json的scripts中添加：

     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
     

  3. 执行npm run deploy后，检查仓库是否生成gh-pages分支，同时在GitHub Pages设置中选择该分支作为部署源。

• 查看浏览器控制台错误
  打开部署页面按F12调出控制台，检查是否存在资源加载404报错，这类问题通常由路径配置错误导致，对应调整homepage或静态资源引用路径即可。

• 验证GitHub Pages构建状态
  进入仓库的「Actions」标签页，查看部署工作流是否成功完成，排查是否存在构建失败、权限异常等报错信息。

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