为什么我的 React 应用在部署到 GitHub Pages 后出现白屏

Source: Dev.to

困惑

当我把 React 项目部署到 GitHub Pages 时，开发阶段一切看起来都正常。
部署后打开页面，却只看到一片白屏——没有错误信息，只有空白。

我检查了浏览器控制台，发现我的 JavaScript 和 CSS 文件没有加载。它们的 URL 像这样：

/assets/index.js
/assets/index.css

起初我以为这些是普通的本地路径。在我的简单 HTML 项目中，我使用：

assets/index.js

即使部署后也能正常工作。那为什么这里会失败呢？

我发现的

问题出在前导斜杠 /。以 / 开头的路径会告诉浏览器：

“从域名的根目录开始搜索。”

而不是在：

username.github.io/my-project/

内部搜索，而是从：

username.github.io/

开始搜索。

于是它尝试加载：

username.github.io/assets/index.js

但实际文件位于：

username.github.io/my-project/assets/index.js

文件始终找不到，导致出现白屏。

为什么在本地有效

在本地的 HTML 项目中，我使用：

assets/index.js

这是一种 相对路径。它告诉浏览器：

“从当前文件夹开始搜索。”

正因为如此，它在本地以及部署后都能正常工作。

教训

路径大致分为三类：

• 绝对 URL →
• 根相对路径 → /file.js
• 相对路径 → file.js 或 ./file.js

前导斜杠 / 不是 本地路径，而是根相对路径。这个细微的差别导致了整个部署的失败。