修復 GitHub Pages SPA 路由問題

leechiuhui · leechiuhui · commit 880c3c7ac7e5 · 2025-06-30T20:01:42.000+08:00
🔧 問題修復： - 添加 web/404.html 處理 GitHub Pages 的 SPA 路由 - 修改 web/index.html 添加路由重導向處理邏輯 📝 技術說明： GitHub Pages 對於 SPA 應用程式，當用戶直接訪問 /user/123 這樣的路徑時， 會返回 404 因為沒有實際檔案。404.html 會將這些請求重導向到 index.html 並保留路由資訊，讓 Flutter 的路由系統能正確處理。 🎯 解決問題： - QR 碼連結 https://auto30next.alearn.org.tw/user/xxx 現在應該能正常工作 - 所有動態路由都能在 GitHub Pages 上正常運作
diff --git a/web/404.html b/web/404.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Auto30 Next</title>
+  <script type="text/javascript">
+    // Single Page Apps for GitHub Pages
+    // MIT License
+    // https://github.com/rafgraph/spa-github-pages
+    // This script takes the current url and converts the path and query
+    // string into just a query string, and then redirects the browser
+    // to the new url with only a query string and hash fragment,
+    // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+    // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+    // Note: this 404.html file must be at least 512 bytes for it to work
+    // with Internet Explorer (it is currently > 512 bytes)
+
+    // If you're creating a Project Pages site and NOT using a custom domain,
+    // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+    // This way the code will only replace the route part and not the real directory.
+    // For example: https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+    // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+    // Otherwise, leave pathSegmentsToKeep as 0.
+    var pathSegmentsToKeep = 0;
+
+    var l = window.location;
+    l.replace(
+      l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+      l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+      l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+      (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+      l.hash
+    );
+  </script>
+</head>
+<body>
+  <!-- 
+    This file is used to handle client-side routing for Single Page Applications (SPA) 
+    hosted on GitHub Pages. When a user directly accesses a route like /user/123, 
+    GitHub Pages returns a 404 because there's no actual file at that path. 
+    This script redirects such requests to the main index.html with the route 
+    information preserved in the query string, allowing the SPA router to handle it properly.
+  -->
+</body>
+</html> 
diff --git a/web/index.html b/web/index.html
@@ -100,6 +100,18 @@
   </div>
   
   <script>
+    // Handle GitHub Pages SPA routing
+    (function(l) {
+      if (l.search[1] === '/' ) {
+        var decoded = l.search.slice(1).split('&').map(function(s) { 
+          return s.replace(/~and~/g, '&')
+        }).join('?');
+        window.history.replaceState(null, null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+        );
+      }
+    }(window.location))
+    
     window.addEventListener('load', function() {
       var loading = document.querySelector('#loading-indicator');
       
