Javascript Github页面中是否有一个配置允许您将单页应用程序的所有内容重定向到index.html？_Javascript_Github_Single Page Application_Github Pages

Javascript Github页面中是否有一个配置允许您将单页应用程序的所有内容重定向到index.html？

javascript github

Javascript Github页面中是否有一个配置允许您将单页应用程序的所有内容重定向到index.html？,javascript,github,single-page-application,github-pages,Javascript,Github,Single Page Application,Github Pages,我试图发布我的SPA应用程序，该程序在本地运行良好，但当我将其推送到Github页面时，如果您直接导航到内部页面，则内部页面不会注册例如http://USER.github.io/PROJECT_NAME/有效，但http://USER.github.io/PROJECT_NAME/about没有，因为没有重定向或重写。index.html位于项目的根目录下。Github页面允许您创建一个页面，该页面将在每次。。。有一个404错误。如果http://USER.github.io/PROJECT

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

例如

http://USER.github.io/PROJECT_NAME/

有效，但

http://USER.github.io/PROJECT_NAME/about

没有，因为没有重定向或重写。index.html位于项目的根目录下。

Github页面允许您创建一个页面，该页面将在每次。。。有一个404错误。如果

http://USER.github.io/PROJECT_NAME/about

不存在，它将显示您的

404.html

内容，其中“未找到”url为

window.location

因此，此页面可以包含重定向到hashbang样式路由的脚本。例如：react路由器，即使使用干净的URL（browserHistory），也可以理解像

PROJECT_NAME/#/about

这样的路由，并将自动推送到

PROJECT_NAME/about

太难看了

我刚刚为bower/npm构建了一个小软件包来解决这个问题，所以我想在这里分享一下，作为你问题的答案

如果您在

404.html

和

index.html

页面中包含该包，它会将所有流量重定向到

index.html

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

如果您正在创建react应用程序，并且希望在gh页面中使用浏览器路由器，解决方案是在根目录中创建404.html文件，并在构建react应用程序后将index.html中的所有内容复制到404.html

当用户尝试访问您的页面时，例如GitHub将为您的index.html页面提供服务，而如果用户尝试访问，由于该页面不存在，GitHub将为404.html页面提供服务，该页面的内容与index.html相同，因此您的react应用程序将按预期工作

下面是示例的源代码

更新

您可以在每次运行

npm run build

自动生成404.html文件时自动执行该过程

第一步：为跨平台命令安装shx，如下所示

npm安装shx--save dev

第二步：转到脚本块中的package.json替换

“build”：“react scripts build”

为

“build”：“react scripts build&&shx cp build/index.html build/404.html”

仅此而已

无论何时运行

npm run build

都会自动生成404.html文件。

将此代码添加到

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
}

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

404.md应包含以下内容：

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

这解决了我在Angular应用程序中遇到的问题。

嗯，有一个简单的解决方法。在github页面存储库的根目录中创建一个名为

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>


加载。。。
var doc=document.getElementById（'htmlbody'）；
xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4）{
如果（this.status==200）{
doc.innerHTML=this.responseText；
文件删除属性（“id”）；
}
如果（this.status==404）doc.innerHTML=“未找到页面。”；
}
}
open（“GET”，“index.html”，true）；
xhttp.send（）；

基本上，该脚本只使用Javascript对index.html执行XHR，并将内容作为文档。
我不愿意使用

document.body

，因为我正在考虑更新整个文档，但如果它不起作用，请将doc变量更改为

document.body

。
不确定这是否有效，所以我非常感谢您的反馈。

记住对index.html使用同一个域，否则CORS将启动。

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

我们可以利用这个优势，在项目的根目录（index.html所在的位置）中创建一个404.html文件，其中包含一个重定向到index.html的元标记。只需更换“https://example.com“用你的域名

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


404-重定向

如果您没有服务器资源生成pushState URI请求的实际页面，请使用Hashbang构建应用程序。当您说“本地”时，是指使用Jekyll吗？不，我没有尝试安装Jekyll。我不知道如何配置它来完成我所说的。我可以使用哈希，但我想知道是否有内置的东西来处理这个问题。似乎应该有。据我所知，Hashbang是目前唯一的方法。但有一个问题，这是接近我所寻找的，但我同意它看起来不好看。我想我现在可以接受散列。很酷，下次我需要使用gh页面时，我会检查这个。不利于SEO。它为任何不存在的文件发送404状态。例如，如果文件foo不存在，将向我发送404状态。这是一项很好的工作，但我不喜欢在URL字段中看到的快速重定向。我会选择#style.Hell甚至

mv index.html 404.html

。很好，谢谢。保存两个文件很好。当GitHub无法为index.html文件提供服务时，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>