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

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

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

例如，

http://USER.github.io/PROJECT_NAME/
可以工作，但
http://USER.github.io/PROJECT_NAME/about
则不行，因为没有重定向或重写。 index.html 位于项目的根目录。

javascript github single-page-application github-pages
10个回答
14
投票

如果您正在创建React应用程序并且想在gh页面中使用浏览器路由器，解决方案是在根目录中创建404.html文件，并在构建后将index.html中的所有内容复制到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

更新

您可以在每次运行 

npm run build
时自动执行该过程，以自动生成 404.html 文件。

第一步：安装shx跨平台命令如下

 npm install 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 文件都会自动生成。

8
投票

Github 页面允许您创建一个 

404.html
页面，每次出现 404 错误时都会显示该页面。如果 
http://USER.github.io/PROJECT_NAME/about
不存在，它将显示您的 
404.html
内容，“未找到”网址为 
window.location
。

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

PROJECT_NAME/#/about
这样的路线，并会自动推送到
PROJECT_NAME/about
。

真丑！

6
投票

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

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

如果您将该软件包包含在您的 

404.html
和 
index.html
页面中，它会将所有流量重定向到 
Index.html
,

它支持Project和User/Org Pages类型存储库，处理查询字符串并附带一个工作示例，

2
投票

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

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 将启动。

2
投票

当找不到页面时，会提供 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>

1
投票

对我来说，我一直欣赏最简单的解决方案。

只需添加一个文件，

404.html

全部内容：

<script>
    window.location.href = "/";
</script>

就是这样！希望有帮助！

0
投票

将此代码添加到您的 

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
}
0
投票

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

  1. 404.md 应包含以下内容：
---
permalink: /404.html
---
  1. 404.html 应该与index.html 具有相同的内容

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

0
投票

无需在 

package.json

中的一行中添加依赖项即可完成此操作

(

package.json
)

{
    .
    .
    .
    "scripts": {
        "postbuild": "cp ./build/index.html ./build/404.html'",
        .
        .
        .
    }
}
如何运作
  1. 每当您运行 
    npm run build
    （就像在部署过程中一样），
    postbuild
    脚本就会触发。
  2. 构建后脚本只是将您的index.html复制到404.html
  3. 当 GH 页面收到对其无法找到的资产的请求时，它会提供 404.html 页面，该页面现在又只是您的 SPA 应用程序，并且所有路由信息 
    /some_route
    也将发送到您的 SPA 应用程序中。
-1
投票

抱歉回复晚了。 GitHub 将查找 404.html 文件；如果没有找到，GitHub 将显示其默认页面。

因此，您可以创建一个 404.html 文件，将用户重定向到 index.html 文件。

为此，您需要使用普通的 Javascript；请参阅下面的示例。

404.html

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

<head>
  <title>Page not found</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <script>
    const urlToRedirect = 'https://rajgohil07.github.io/todo-app-redux/'
    window.location = urlToRedirect;
  </script>
</body>

</html>

您可以将项目链接传递给 urlToRedirect 变量。

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