原因
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的內容是一致的，從而再次能夠接管前端路由。
注意
暫無。
