React应用部署GitHub Pages后页面空白，仅Chrome正常显示

算力阿峰

2026-6-16

解决React部署GitHub Pages仅Chrome可加载的问题

以下是针对你遇到的跨浏览器空白问题的排查和修复方案：

1. 修复资源路径兼容性

把package.json中的homepage改为相对路径，避免不同浏览器对绝对URL的解析差异：

"homepage": "."

重新执行npm run build和gh-pages -d build部署。

2. 强制指定BrowserRouter的basename

替换process.env.PUBLIC_URL为硬编码的仓库名，避免环境变量在非Chrome环境下未正确注入：

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter basename="/my-cv-website">
    <nav>
      <Link to='/'></Link>
    </nav>

    <Routes>
      <Route path='/' element={<App />}/>
    </Routes>
  </BrowserRouter>
);

注意：React Router v6中Route的exact属性已被废弃，无需添加。

3. 补全ES6+语法转译

部分浏览器（如旧版Firefox、Safari）不支持未转译的ES6+语法（可选链?.、空值合并??等），需配置转译兼容：

安装依赖：

npm install react-app-rewired customize-cra @babel/preset-env --save-dev

项目根目录创建config-overrides.js：

const { override, addBabelPreset } = require('customize-cra');
module.exports = override(
  addBabelPreset('@babel/preset-env')
);

修改package.json脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

重新执行build和部署。