使用create-react-app构建的React应用部署至GitHub Pages时构建正常但部署失败

我完全懂你现在的困扰——本地跑起来顺顺当当，构建也没报错，结果部署到GitHub Pages就出问题，试了调整connectedRouter的basename和仓库地址还是不行。别着急，咱们一步步排查可能的问题：

1. 先确认package.json的homepage配置是否到位 #

这是create-react-app部署到GitHub Pages最容易踩坑的点，很多异常都源于这里。你得在package.json里加上正确的homepage字段：

"homepage": "https://<你的GitHub用户名>.github.io/<仓库名>"

要是你的仓库是个人仓库，也可以用相对路径写法：

"homepage": "/<仓库名>"

注意这里的仓库名要和GitHub上的完全一致，大小写都不能错！

2. 再仔细核对connectedRouter的basename配置 #

你已经加了basename，但得确保它和homepage的路径部分完全匹配。比如你的homepage是/my-react-app，那配置应该是这样：

import { ConnectedRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: '/my-react-app' // 这里必须和homepage的路径部分一模一样
});

// 组件里使用的时候
<ConnectedRouter history={history}>
  {/* 你的路由组件内容 */}
</ConnectedRouter>

另外，要是你不小心用了HashRouter（不过connectedRouter通常配BrowserHistory），也要同步调整basename。

3. 检查GitHub Pages的部署分支设置 #

登录你的GitHub仓库，进入「Settings」→「Pages」，看看Source部分：

• 如果你用的是npm run deploy，这个命令一般会把构建产物推到gh-pages分支，所以这里要选gh-pages分支，而不是master分支。
• 路径选/(root)就好。

4. 清缓存强制刷新试试 #

有时候浏览器缓存了旧资源，导致看起来部署异常。试试用Ctrl + Shift + R（Windows/Linux）或者Cmd + Shift + R（Mac）强制刷新，或者开无痕模式访问页面。

5. 确认deploy脚本和依赖是否正确 #

先看package.json里的scripts，deploy脚本应该是这样：

"scripts": {
  "deploy": "gh-pages -d build"
}

要是还没装gh-pages，先执行npm install --save-dev gh-pages装上。

6. 核对git远程仓库地址 #

你说更新了仓库地址，那可以执行git remote -v看看输出，应该是类似这样：

origin  https://github.com/<你的用户名>/<仓库名>.git (fetch)
origin  https://github.com/<你的用户名>/<仓库名>.git (push)

要是不对，用git remote set-url origin https://github.com/<你的用户名>/<仓库名>.git修正。

要是以上步骤都试了还是有问题，去仓库的「Actions」里找pages-build-deployment的工作流，看详细部署日志——里面会有具体的错误信息，能帮你精准定位问题。

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