将 React 应用程序部署到 github 页面和 vite 时出现空白页面

Question

当我尝试使用包 gh-pages 将我的 React 应用程序部署到 github 页面时，结果页面是空白的。结果页面

我要部署的页面在这里：LINK 我不知道这是否重要，但我目前正在使用 GitHub 给我的免费域名：www.elvas.me

我尝试按照 react 官方文档：Link，但它对我不起作用......也许是因为我使用的是 vite 而不是 create-react-app？

*编辑*

发现该站点试图从错误的位置获取 .js 和 .css。

我只是不知道我做错了什么......

Answer 1

好吧，要解决这个问题，我唯一要做的就是将

base:"{repName}"

添加到 vite.config.ts 文件中。

来源：https://vitejs.dev/guide/static-deploy.html

图片没有加载，我用这个来修复它们： Github 页面 vite JS 构建不显示图像

Answer 2

我看到你已经成功地将你的 React 项目部署到 Github 页面，但我是这样做的，以防有人需要帮助：

• 首先，确保你的“.git”文件夹和你的项目在同一个文件夹中。

1. 跑

   npm run build

   。你现在应该有一个

   dist

   文件夹了。
2. 打开文件

   vite.config.js

   （或

   .ts

   ）。
3. 使用您的存储库名称添加

   base

   文件。包括两个

   /

   .

示例：假设您的 github 项目的 URL 是

https://github.com/atlassian/react-beautiful-dnd

.

export default defineConfig({
  base: "/react-beautiful-dnd/",
  plugins: [react()],
});

3. 打开您的

   .gitignore

   文件并删除

   dist

   行。你想确保

   dist

   文件夹被推送到 github.

4. git add .

5. git commit -m "deploy"

6. git subtree push --prefix dist origin gh-pages

7. 等待几分钟（我用了 4 分钟）然后打开页面。在上面的示例中，URL 将如下所示：https://atlassian.github.io/react-beautiful-dnd

如果它仍然显示空白页面，则很可能与第 3 步有关。确保您添加了正确的存储库 URL，并且它以

/

符号开头和结尾。

就这些吧，希望对你有帮助。 我使用这篇博文作为指导，它是对以上内容的更详细解释。

Answer 3

对于将来遇到此问题并找到此线程的任何其他人：请非常仔细地检查您的文件名以了解您的

vite.config.ts

等。我不小心将

vite.config.ts

误命名为

vite.config.js

（您使用的名称必须匹配

tsconfig.node.json

）。预览时一切正常，直到我尝试部署，然后突然出现白屏。我花了几个小时才弄清楚出了什么问题。

此外，如果您使用的是自定义域，则正确的基础是

"/"

，这也是默认的（无）。

最后，有很多博客文章为您提供有关使用什么 github 操作的建议。当文档中的那个不起作用时，我尝试使用此类指南中推荐的其他人。但是当我解决了潜在的问题时，我的部署仍然没有工作；只有当从实际文档返回建议的配置时，我的部署才成功。

有很多事情要搞砸，希望随着vite的成熟，有更多正确的答案和（相对）更少的错误答案，我希望这对某人有所帮助！