单页应用在gh-pages动态路由刷新后404解决方案

最新推荐文章于 2024-08-28 08:53:56 发布

weixin_34221276

最新推荐文章于 2024-08-28 08:53:56 发布

阅读量759

点赞数

文章标签： javascript webpack ViewUI

原文链接：https://segmentfault.com/a/1190000012951274

版权

因为gh-page只能存放静态资源。并且不支持.htaccess,所以用vue+vue-router+webpack构建出来的单页应用直接将dist文件推送到gh-page分支在切换路由之后手动刷新是会出现404的。
只需要两步操作就可以解决

1.给站点根目录添加404.html,一般也就是dist目录下（gh-page找不到的路径会自动访问这个404.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
  sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/'"></meta>
</head>
<body>
     
</body>
</html>

2.给index.html添加

<script>
  // 这段代码要放在其他js的前面
  (function(){
    var redirect = sessionStorage.redirect;
    delete sessionStorage.redirect;
    if (redirect && redirect != location.href) {
      history.replaceState(null, null, redirect);
    }
  })();
</script>

完成、
详细规则见spa-ghpage-hack