Question

我正在尝试发布我在本地运行良好的SPA应用程序但是当我将其推送到Github Pages时，如果您直接导航到它们，则内部页面不会注册。

例如http://USER.github.io/PROJECT_NAME/有效但http://USER.github.io/PROJECT_NAME/about没有，因为没有重定向或重写。 index.html位于项目的根目录。

Answer 1

我刚刚构建了这个小包（用于bower / npm）来解决这个确切的问题，所以我想我会在这里分享它作为你问题的答案，

https://github.com/websemantics/gh-pages-spa

如果您在404.html和index.html页面中加入了该套餐，它会将所有流量重定向到Index.html，

它支持项目和用户/组织页面类型存储库，处理QueryStrings并附带一个工作示例，

Answer 2

Github页面允许您创建每次都会显示的404.html页面...存在404错误。如果http://USER.github.io/PROJECT_NAME/about不存在，则会显示您的404.html内容，其中包含＆＃34;未找到＆＃34;网址为window.location。

因此，此页面可以包含重定向到hashbang样式路由的脚本。例如：反应路由器，即使使用干净的网址（browserHistory）也可以理解PROJECT_NAME/#/about之类的路由，并自动推送到PROJECT_NAME/about。

那太丑了！

Answer 3

如果您正在创建react应用，并且想要在gh页面中使用浏览器路由器，则解决方案是在根目录中创建404.html文件，并将index.html中的所有内容复制到构建好您的react-app之后，显示404.html。

当用户尝试访问您的页面时，例如https://successtar.github.io/teamwork/，GitHub将为您的index.html页面提供服务；而如果用户尝试访问https://successtar.github.io/teamwork/foo，因为它不存在，则GitHub将为您提供404.html页面。内容与index.html相同，并由此使您的react应用按预期运行。

这是示例https://github.com/successtar/teamwork/tree/gh-pages

的源代码

Answer 4

将此代码添加到您的index.html和404.html文件中：

  // if it's on index.html
  if (window.sessionStorage.path) {
  let path = window.sessionStorage.path; // gets the path saved on sessionStorage
  window.history.pushState(null, null, path); // push it on url
  window.sessionStorage.removeItem('path'); // removes from session

} else { // if it's on 404.html (path doens't exist)
  let path = window.location.pathname; // get the path url
  window.sessionStorage.path = path; // saves on sessionStorage
  window.location.href = '/'; // go to index
}

Answer 5

由于您使用的是React，HOWTO in create-react-app应该有效。

基本上，将homepage字段添加到package.json并安装gh-pages包。

Answer 6

嗯，有一个简单的方法。在 github pages 存储库的根目录中创建一个名为 404.html 的文件。该文件的内容应该是：

<!DOCTYPE html>
<html lang="en" id="htmlbody">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
</head>
<body>
    <script>
        var doc = document.getElementById('htmlbody');
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    doc.innerHTML = this.responseText;
                    doc.removeAttribute("id");
                }
                if (this.status == 404) doc.innerHTML = "Page not found.";
            }
        }
        xhttp.open("GET", "index.html", true);
        xhttp.send();
    </script>
</body>
</html>

基本上，该脚本仅使用 Javascript 在 index.html 上执行 XHR 并将内容制作为文档。
我不愿意使用 document.body，因为我正在考虑更新整个文档，但如果它不起作用，请将 doc 变量更改为 document.body。
不确定这是否有效，所以我非常感谢反馈。
请记住对 index.html 使用相同的域，否则 CORS 将启动。

Answer 7

当找不到页面时，会提供 404 页面以通知用户。此外，当存在 404.html 文件时，将提供该文件而不是默认文件。

我们可以通过在项目的根目录（index.html 所在的位置）中创建一个 404.html 文件并使用重定向到 index.html 的元标记来充分利用这一点。只需将“https://example.com”替换为您的域即可。

这对我有用，希望对你也有用！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="refresh" content="0; URL='https://example.com'" />
    <title>404 - redirect</title>
</head>

<body></body>

</html>

Answer 8

创建两个文件 404.md 和 404.html

404.md 应包含以下内容：

<块引用>

---
permalink: /404.html
---

404.html 应该与 index.html 具有相同的内容

这解决了我的 Angular 应用问题。

Github Pages中是否有配置允许您将所有内容重定向到index.html以获取单页应用程序？

8 个答案: