React部署GitHub Enterprise Pages遇空白页及资源路径错误求助

核心问题是你在package.json里错误使用了home字段，Create React App要求配置的是homepage字段，这导致打包生成的资源路径没有带上仓库前缀，最终出现404错误。

步骤1：修正package.json配置 #

将package.json中的home字段改为homepage，确保值正确：

{
  "name": "barcode",
  "version": "0.1.0",
  "homepage": "https://pages.github.kp.org/E546371/barcode",
  "private": false,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
}

步骤2：重新打包并部署 #

1. 删除本地的build文件夹
2. 执行重新打包命令：npm run build
3. 重新将build目录的内容部署到GitHub Enterprise Pages

额外检查点 #

• 确认public/index.html中存在id为root的DOM元素，且index.js中正确渲染到该元素（比如使用ReactDOM.createRoot(document.getElementById('root')).render(<App />)）
• 检查GitHub仓库的Pages设置：确保部署源选择了正确的分支（通常是gh-pages分支），且自定义域名（如果有）配置正确
• 若仍有问题，可尝试将homepage设置为相对路径格式："/E546371/barcode"，再重新打包部署

修改后，打包生成的index.html中，资源引用会自动带上/E546371/barcode/前缀，比如/E546371/barcode/static/css/main.34cc38e5.css，就能正确加载资源，React应用也会正常渲染。

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