怎样为Github pages Hack使用了vue-router history模式的vue应用？ ...

潇潇洒洒0118 · 发表于 2022-10-28 09:10:06

（前提：这里讨论的是有关于github pages以及vue-router的history mode的。并且，相关配置正确，使用hash模式时，一切正常。另外，hash mode没此类问题，不在讨论之列）
使用vue-cli构建的应用(vue-router history mode)，打包发布到github pages之后，无法正常运行。当直接访问类似 https://user.github.io/project/foo/bar 的链接时，抛出404错误。
Github pages原生不支持单页面应用，没有为前端路由提供支持，并且为了安全，也不支持自定义后台配置。因此，我们没办法直接配置服务来fallback我们的应用。
留给我们可操作的有一个404.html。也可以找到类似的开源方案：
csuwildcat的<meta> hack： https://github.com/csuwildcat/sghpa。
rafrex的location.replace()：https://github.com/rafrex/spa-github-pages。
当然还有最暴力的复制已有index.html为404.html。基本思路大体为，通过404.html重定向我们的请求，将请求全部导向我们的应用入口index.html。
经过测试，这些方案确实解决了部分单页应用的问题，但对于vue-cli构建的使用了vue-router history mode的应用貌似无效？经测试，使用这些方案，所有请求一般会返回我们在vue应用中自定义的NotFoundComponent。似乎是成功了一半-_-!。那么，是hack的问题？应用配置的问题？还是vue-router的问题？或者说这本来就是个天坑...
总结一下：
当使用history模式生成漂亮正常的url时，github pages却不支持类似的动态查询（/foo/bar）,并且没办法直接配置来fallback，我们需要HACK？怎样HACK？有没有方案或思路？
Tip：关于部署前端项目，有surge，now等众多方案，不建议提供或推荐此类的替代答案。提供更多关于vue-router，fallback，前端路由相关的将是极好的！
Thanks!
参考链接： Add single page application support for Github pages · Issue #408 · isaacs/github
如本问题及描述存在问题，请及时联系我进行更改！

贰佰陆 · 发表于 2022-10-28 09:31:46

GitHub Pages 既然支持 404，那么从个人的经验角度来说（因为我没有实际线上部署过 GitHub Pages），我这里有以下备选方案。当然，基本思路就是通过404搞事情。
先列出题主提出的方案：

csuwildcat/sghpa 这个通过 sessionStorage 存储之前的地址，然后跳转到新地址里并读取之前存储的内容，重新route。
rafrex/spa-github-pages 这个就是把当前地址作为参数跳转到 index.html。
复制 index.html 到 404.html 最简单粗暴，不过没准效果是最好的……
用 Nuxt.js 等可编译成静态 HTML 并部署的方案。

在这之外，我个人还有以下建议：

使用 HashRoute + 404 跳转模式。类似网易云音乐 Web 版模式，通过 404 页面访问 /aaa/aaa 时，跳转到 #/aaa/aaa。
让 404 直接获取 index.html，然后直接把它丢到文档流里。

fetch('index.html').then(data => document.write(data.text()))

文末吐个槽：大约在十年前，国内建站风潮方兴未艾，带动着出租虚拟主机业务风生水起，这也催生了不少面板商（制作整套管理后台，卖给打算进入虚拟主机业务的人的人）。当年比较出名的 8u，就是使用这种面板解决方案来做虚拟主机业务的。它们通常采用 Windows 2003 + IIS 6.0 + ASP + PHP 的组合，大部分都没有安装URL重写组件。于是，当年的人对 404.asp 和 global.asa 有了非常特殊的感情……

天赖之音 · 发表于 2022-10-28 09:53:26

github上pages静态部署

向这样的链接https://user.github.io/project/foo/bar，由于没有像后端路由那样对url进行拦截处理，所以该url明确指向一个静态文件，找不到该文件会返回404这是肯定的。
vue-router文档表示history模式需要后台支持

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html 页面，这个页面就是你 app 依赖的页面。

如果非要使用history模式下那样的url，我有个妥协解决办法

使用nuxt，nuxt作为vue ssr方案，路由默认使用history模式，当然这需要在后端部署nuxt。
不过nuxt提供静态部署方案

junteng918 · 发表于 2022-10-28 10:15:06

rafgraph/spa-github-pages 中提到 19 年开始 Google 对 redirect 路由不计入站点排名统计, 所以如果对 SEO 有需求的 SPA 站点静态部署还是老老实实走 SSG 了。Gatsby, vuepress, nuxt 等框架都是类似思路。

超级加菲猫 · 发表于 2022-10-28 10:36:46

404.html方案可行，可以参考我的项目，使用的是BrowserRouter
https://github.com/LoveLiveSunshine/pixiv.moe/tree/gh-pages?files=1

shechaowin · 发表于 2022-10-28 10:58:26

vue3+vite 终于找到个可行的
/public里加个404.html，内容可以不写，head里写：
<script> sessionStorage.redirect = location.href;</script>
然后index.html里加上：
<script> (function(){ let redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect !== location.href) { history.replaceState(null, null, redirect); } })();</script>
就完事了
参考：於Github page部屬靜態Vue.js專案，在History Mode下子頁面會重新導向到404的解決方案。
本来还想用nuxt 但它对vite的支持是experimental 貌似还要用webpack 就放弃了