我正在尝试在 github 页面上部署我的静态反应应用程序，但出现白屏

Question

查看控制台后，我得到了这个

Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.

链接到我的回购：https://github.com/Abhishek-098/TourSpot

Answer 1

要将单页应用程序（React、Vue）部署到 GitHub Pages，您应该知道进行生产构建是必要的。这可以通过执行 npm run build 或 yarn build 来完成，具体取决于您使用的包管理器。此命令将生成一个 ./dist 或 ./build 文件夹，其中将包含纯 HTML、CSS 和 JS 格式的 React 应用。

对于 GitHub 页面，您应该进行一些配置。首先，您的生产版本（来自 dist、build 文件夹）中的 index.html 应该在根文件夹中，这意味着，当您打开 repo（不在 build 文件夹中）时，您应该能够看到它。如果 GitHub 页面在 repo 的根目录中没有检测到任何 index.html，它将显示一个 404 页面。

现在，由于您不希望生产构建文件干扰您的 React 项目，建议您为 GitHub 页面部署创建一个不同的分支。

因此，理想情况下，您将有两个分支：master 和 gh-pages，第一个包含您的 React 项目，第二个仅包含您的 dist 文件夹，但位于项目的根目录中。

以下是使用 GitHub 页面部署的 Repo 结构示例。

https://github.com/8rb/React-Quiz/tree/master

您可以看到两个分支，并且部署链接运行良好。 要配置部署到 GitHub 页面的分支，请转到设置并选择您的生产版本所在的分支。

所有信息均来自以下链接：

https://create-react-app.dev/docs/deployment/#github-pages

希望你觉得它有用！