Github Pages和React应用无论采用什么方法都无法正常工作

Question

我已经尝试了一个星期将我的React App项目添加到Github Pages。经过所有的准备工作和需要完成的一切，我终于让它出现了，但是仅仅是部分。实际上，它什么都不显示，也没有给我任何错误提示。这让我相信我的脚本

<script src="../dist/bundle.js"></script>

罪魁祸首似乎是bundle.js。然而问题在于我从未使用过bundle.js。我想学习如何不使用create-react-app使用React，在这样做的过程中，我似乎已经深入到游戏中，甚至不确定这应该如何工作。

以下是Github Pages目前的形式

https://kevin6767.github.io/redux-api-opendota2/

编辑：现在它似乎显示404错误。 我甚至不确定为什么此时无法正常工作。 我尝试了许多不同的方法。

- 4156

---

首先，如果“index.html”文件存在，我认为不应该显示404。 - Ajeet Shah

@ajeetshah 在 docs 文件夾中 https://github.com/kevin6767/redux-api-opendota2 - 4156

这个链接上说你需要创建一个名为username.github.io的GitHub仓库，其中username应该是你的GitHub用户名。你应该先更正你的仓库名称。 - Ajeet Shah

Answer 1

我不确定您是如何将React应用程序上传到GitHub Pages的，但在这里，我将介绍正确的方法：

步骤1：通过终端安装gh-pages，确保您位于正确的文件目录中。

$ npm install gh-pages --save-dev（我们将其保存为开发依赖项）

步骤2：进入您的package.json文件并添加以下内容：

"homepage": "<YOUR_GITHUB_USERNAME>.github.io/<REPO_NAME>," （在"name"之前）

步骤3：在package.json的"scripts"部分中添加：

"predeploy": "npm run build", "deploy": "gh-pages -d build",

步骤4：假设您已经提交并推送了代码到Git Repo，在终端中使用npm run deploy命令来查看GitHub Pages中的更改。

另外，请确保在源代码中，您为homepage设置了与package.json中相同的路由。

- Aniruddha Mukherjee