React项目部署Github Pages自定义域名后静态资源加载失败求助

云原生阿岚

2026-5-21

解决自定义域名下React资源加载路径错误的问题

这个问题我之前帮朋友处理过，核心是资源根路径的配置没跟上自定义域名的变更，咱们一步步来修复：

第一步：修正package.json里的homepage字段
之前你可能设置的是指向Github Pages的仓库路径，比如"homepage": "https://<你的用户名>.github.io/<仓库名>"，现在需要改成你的自定义域名，比如：
```
"homepage": "https://my.custom.domain"
```
这样create-react-app在build的时候，会把所有静态资源的路径都设为根路径（比如/static/css/...），而不是带仓库名的路径。
第二步：重新构建并部署
先重新生成build文件夹：
```
npm run build
```
然后重新部署到gh-pages分支：
```
gh-pages -d build
```
这时候build目录里会自动生成一个CNAME文件，里面就是你的自定义域名，gh-pages工具会把它一起上传到部署分支。
第三步：检查Github仓库的自定义域名设置
登录Github，进入你的仓库，到「Settings」->「Pages」页面，确认「Custom domain」输入框里已经填了你的自定义域名，并且勾选了「Enforce HTTPS」（如果你的域名支持HTTPS的话）。
最后：清理浏览器缓存
有时候浏览器会缓存旧的资源路径，导致还是请求带仓库名的文件，按Ctrl+F5强制刷新页面，或者直接清空浏览器缓存再访问。