如何解决http-server+ngrok环境下多级路径404页面失效问题

问题核心是相对路径解析错误：当访问localhost:8080/a/b/c/这类深层路径时，浏览器会把当前路径作为基准，尝试从/a/b/c/scripts/404.js加载资源，但你的脚本实际在根目录的scripts文件夹下，自然找不到。按以下步骤修复：

1. 把404.html里的资源引用改成绝对路径 #

打开404.html，给所有资源引用的相对路径前加上斜杠（/），强制从网站根目录加载：

• 原脚本引用：<script src="scripts/404.js"></script>
• 修改后：<script src="/scripts/404.js"></script>
• 其他资源（如字体、样式表）同理，全部改用绝对路径开头的写法。

2. 修正404.js里的跳转路径 #

打开scripts/404.js，把跳转代码的相对路径改成绝对路径：

• 原代码：window.location.href = "index.html";
• 修改后：window.location.href = "/index.html";
  这样点击按钮时会直接跳转到网站根目录的首页，而不是当前深层路径下不存在的页面。

3. 配置http-server确保所有404请求返回根目录的404.html #

启动http-server时，使用--custom404参数指定自定义404页面，命令如下：

http-server --custom404 404.html

这个参数会让服务器把所有未找到的请求，统一返回根目录下的404.html，从根源避免子路径下的404页面路径混乱问题。

完成以上三步后，不管访问任何无效的深层路径，404页面的样式、脚本都能正常工作，按钮跳转也不会出错。

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