原因
Github Pages无法处理history模式的前端路由。
解法
方案1
借助meta标签
// index.html
<script>
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>// 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='/'">
<title>404</title>
</head>
<body>
</body>
</html>原理：
当Github Pages发现无法处理的前端路由时，会跳转至404.html，此时我们在404.html利用meta的自动重定向能力，跳转至index.html，从而再次能够接管前端路由。
方案2
复制index.html的内容到404.html。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>// 404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>原理：
当Github Pages发现无法处理的前端路由时，会跳转至404.html，由于我们的404.html内容已经和index.html的内容是一致的，从而再次能够接管前端路由。
注意
暂无。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。