如何在GitHub Pages部署纯JS单页应用？解决刷新404问题

在GitHub Pages上部署纯JS单页应用时，刷新非根路径出现404，核心原因是GitHub Pages会尝试寻找对应路径的静态文件，而你的单页应用只有index.html一个入口。要让所有路径都返回index.html，按以下步骤操作：

1. 添加404.html文件 #

直接复制项目根目录的index.html完整内容，将副本重命名为404.html，放在同一目录下。

GitHub Pages在找不到对应路径的资源时，会自动返回404.html，这样你的前端JS代码就能正常加载并接管路由逻辑。

2. 修复URL路径（可选但推荐） #

在index.html的<body>标签末尾添加一段脚本，避免URL异常导致路由识别失败：

(function() {
  const currentPath = window.location.pathname;
  // 仅处理非根路径且未标记过的情况
  if (currentPath !== '/' && !window.location.hash.includes('route-handled')) {
    // 修正路径并标记已处理
    window.history.replaceState({}, document.title, currentPath + '#route-handled');
    window.location.reload();
  }
})();

这段脚本的作用是让前端路由能正确识别当前页面的路径，防止出现路由不匹配的问题。

你现有的router函数和导航点击事件逻辑无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Biswa Baral