GitHub Pages 无法加载页面

Question

我使用

vite

来捆绑我的项目，将其部署到 GitHub，并希望使用 GitHub Pages 来加载它。对于部署，我使用 GitHub Actions 来部署我的项目。但是当页面打开时，它是空白的，并在网络选项卡上显示此错误，并在控制台上显示错误消息：

无法加载资源，服务器响应状态为 404

我明白这个问题的原因，但找不到合适的解决方案。有人可以推荐一下吗？

我在网上搜索尝试找到解决方案，例如编辑

vite.config.ts

，添加

base

，或者更改我的

main.tsx

的绝对路径和相对路径。但部署的 GitHub Pages 仍然是空白。我希望该项目可以显示在我的 GitHub 页面上。

Answer 1

如何使用自定义域名将vite应用部署到github页面

设置

1. 在 vite.config.js 文件中更改（或添加，如果不存在）存储库的基本 urn。

2. 构建您的应用程序。
3. 推送您的应用程序。

杰凯利

1. 在您的repo、设置、Pages选项卡中创建适当的jkelly文件（更改分支名称时要小心，必须与您的名称相同）。
   vitejs jkelly 文件配置

拉

1. 再次拉取您的项目，这样您将获得最新创建的文件（由部署管道创建）。

选择新基地

1. 再次更改您的 vite 配置文件中的基础（根据您的域名和您要设置的 urn）。
   如果您希望您的项目在网站 '/' 的基础上或在子页面 '/subpage' 上提供，请相应地设置您的基础。
   

如果你想在基地服务，你也可以完全删除基地属性。

2. 图像的链接必须位于公共文件夹中，如下所示： 'img/temp/example.png'。开头没有'/'。

3. 您的 favicon.ico 文件必须位于您的公共文件夹中，并在您的 index.html 中像这样引用：'/favicon.ico'.

4. 不要忘记删除 .gitignore 中的

   /dist 文件夹引用（如果存在）。

5. 构建更改，然后推送所有内容。

6. 转到您的存储库、

   设置、页面选项卡，设置您的自定义域并保存。

验证您的域名

*nb：步骤可以在此处找到 -->

github 文档/验证域

转到您的域的 DNS 记录。
添加正确的 CNAME 记录：host =
2. www.domain.com 和 data = github-username.github.io.
点击此链接：
3. Github/settings - 配置域
添加您的域并进行相应配置。在您的 DNS 记录中，它看起来像这样：
4. 

一切都准备好了😀。终于……可以休息了。

编辑：

请注意，React Router 在过去几年中发生了很大变化。它可能是许多错误的根源，因此以下是 youtube 上的分步指南：

https://youtu.be/uEEj2c3_ydg?si=NuxLpJN5pcYYfKq8