在 GitHub Pages 上托管单页 React 应用程序 - 获得空白页面

问题描述 投票：0回答：1

我正在学习 React，并希望在 gh-pages 上托管我的小单页项目，以将其包含在我的投资组合中，但没有实际的应用程序，只有一个空白页面：

https://bopcho.github.io/my-chat-app/

这是我的仓库：https://github.com/bopcho/my-chat-app

是什么原因导致的以及如何解决？

我尝试从不同的分支机构托管，但没有成功。

javascript reactjs github github-pages
1个回答
1
投票

问题

您必须导出应用程序的生产版本。在您的开发环境中，一旦运行

npm run dev
，您将能够看到结果。

可能的解决方案

您必须运行 

npm build
并再次推送您的代码。最终项目的文件将位于 
dist
目录中。然后，您可以访问 https://bopcho.github.io/my-chat-app/dist/

然后您可以在主/根项目目录中添加重定向 HTML 文件。该文件可能看起来像这样...

<html>
    <body>
        <script>
            window.addEventListener("load", () => {
                window.location.href = "dist/";
            });
        </script>
    </body>
</html>

还有其他方法可以进行重定向，但这无论如何都不是最好的方法。这对我来说是最方便的！

另一个选项是Vite已经添加的，运行

npm run deploy
。我不是 100% 确定它会做什么，因为我还没有使用过它，但看起来，它会创建一个生产版本并自动将其部署到 github 页面。

有用的链接

https://blog.logrocket.com/deploying-react-apps-github-pages/ https://www.geeksforgeeks.org/deployment-of-react-application-using-github-pages/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.