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

Question

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

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

Answer 1

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

Answer 2

Github Pages 允许您创建一个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.

太丑了！

Answer 3

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

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

如果您在您的404.html和index.html页面中包含该包，它会将所有流量重定向到Index.html，

它支持Project和User/Org Pages类型的存储库，处理 QueryStrings 并附带一个工作示例，