因为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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。