当将React应用部署到GitHub Pages时失败,但在本地主机上正常工作时,可能有以下几个原因和解决方法:
package.json
文件中的homepage
字段是否正确设置为GitHub Pages的URL。例如,如果你的GitHub Pages的URL是https://username.github.io/my-app
,那么homepage
字段应该设置为"https://username.github.io/my-app"
。404.html
的文件,并添加以下内容:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0;url=/my-app/index.html">
<script type="text/javascript">
window.location.href = "/my-app/index.html";
</script>
<title>Redirecting to /my-app/index.html</title>
</head>
<body>
If you are not redirected automatically, click <a href='/my-app/index.html'>here</a>.
</body>
</html>
请注意将上述代码中的/my-app
替换为你的GitHub Pages的URL路径。
npm run build
这将生成一个名为build
的目录,其中包含了构建后的静态文件。将这些文件上传到GitHub仓库的gh-pages
分支上。
gh-pages
分支作为GitHub Pages的源。在GitHub仓库的设置页面中,找到"GitHub Pages"选项,并选择gh-pages
分支作为源。如果上述解决方法都没有解决问题,你可以尝试查看浏览器的开发者工具中的错误信息,以便更好地定位问题所在。另外,你还可以参考GitHub官方文档中关于部署React应用到GitHub Pages的指南,链接地址为:https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site。
领取专属 10元无门槛券
手把手带您无忧上云