React项目部署GitHub Pages出现部分内容404及报错问题求助

一、修复核心配置问题 #

1. 正确设置homepage字段 #

不要使用./，直接配置为你的GitHub Pages仓库路径：

"homepage": "/dev-portfolio/"

或者完整URL形式：

"homepage": "https://creaper9487.github.io/dev-portfolio/"

2. 适配路由模式 #

GitHub Pages不支持SPA的BrowserRouter路由重写，需替换为HashRouter：

• 找到项目中的路由配置文件（如src/App.js或路由入口文件）
• 修改路由导入与使用：

// 原代码
import { BrowserRouter as Router } from 'react-router-dom';

// 修改后
import { HashRouter as Router } from 'react-router-dom';

修改后路由会以#作为标识（如https://creaper9487.github.io/dev-portfolio/#/），避免页面刷新或直接访问子路由时返回404。

3. 修复静态资源请求路径 #

针对home.json 404问题，确保请求路径匹配homepage前缀：

• 如果资源放在public目录下，使用process.env.PUBLIC_URL动态拼接路径：

fetch(`${process.env.PUBLIC_URL}/home.json`)

process.env.PUBLIC_URL会自动读取homepage配置的路径前缀，避免硬编码导致的路径错误。

二、解决Lockdown/harden报错 #

该报错多因homepage配置为./时，依赖库的路径解析异常导致。按上述步骤正确配置homepage后即可解决。若仍存在问题，尝试重新安装依赖：

rm -rf node_modules package-lock.json
npm install

三、备选部署方案 #

若不想修改路由模式，可通过GitHub Actions自定义部署流程，或使用GitHub Pages的CNAME绑定自定义域名配合路由重写规则，但操作复杂度较高。最简便的方式仍是上述的HashRouter适配方案。

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