如何修复 Github Pages 中的 Vite.ts/React 网站显示空白页面？

Question

这是我第一次通过 Vite 创建 React 应用程序。正如标题中所述，当我打开链接时，会出现一个空白的白色页面。另外，我在这个项目中使用 TypeScript，而不是 JavaScript。不知道这是否是我问题的原因。

我做的这个项目是我以前从Youtube学习的一个hangman项目（YouTube链接在这里）。这里也是我的 Github 存储库的链接 --> Github Repo。我需要做什么才能使 GitHub Pages 链接生效？

我尝试添加一些配置，在终端中使用 Git 命令，以及其他一些东西。但其中许多似乎是针对 JavaScript 文件而不是 TypeScript。

Answer 1

这对我有用：

1.在 vite.config.js 中设置正确的基数：

export default defineConfig({
  // ...
  base: "/hangman/",
  // ...
})

注意：如果您的存储库位于 https://github.com//，则将 base 设置为“//”。

2.为 Github Pages 创建工作流程：

为此，您可以创建一个文件

/.github/workflows/main.yml

和以下内容： https://github.com/luis-sandbox/hangman/blob/e6905e9dfc670afe675e033d78e844b4e4deec30/.github/workflows/main.yml

3.等待几秒钟以构建应用程序

您可以在

<repoURL>/actions/

中查看状态

---

• 来源：https://vitejs.dev/guide/static-deploy.html#github-pages

• 工作示例：

  • 仓库：https://github.com/luis-sandbox/hangman
  • 状态：https://github.com/luis-sandbox/hangman/actions/
  • 部署网址：https://luis-sandbox.github.io/hangman/