二级页面404本质是服务器找不到请求的物理文件，需先登录服务器或ftp按url路径逐级核对文件是否存在，排查上传遗漏、路径错误、扩展名隐藏、中文空格、权限问题及web服务器路由配置是否正确。
确认二级页面文件是否真在服务器对应路径下
404 的本质是“服务器找不到你请求的文件”，不是前端报错也不是 JS 崩溃。先别改代码，直接登录服务器或 FTP，按浏览器地址栏里的完整路径一级级打开目录，看 about.html、contact/index.html 这类二级页面是否真实存在于 public/ 或 htdocs/ 对应子目录中。
常见漏点：
- 文件上传时被跳过（比如 IDE 同步忽略
.html后缀，或 Git 未提交） - 本地开发用的是
src/pages/contact.html，但构建后输出到dist/contact.html，而你访问的是/pages/contact.html - 路径含中文或空格，如
/产品介绍.html，服务器默认不支持或需 URL 编码 - Windows 下文件扩展名被隐藏，实际是
contact.html.txt，但显示为contact.html
检查 Web 服务器是否把请求正确路由到二级路径
静态服务器（如 Nginx、Apache、Vercel、GitHub Pages）对根目录和子目录的处理逻辑不同。例如你访问 https://example.com/blog/post-1.html，服务器必须能从 /blog/post-1.html 这个物理路径读取文件，而不是只认 /index.html。
实操要点：
- Nginx：确认
location /块里没加try_files $uri =404却漏了$uri/，否则/blog/这类目录请求会直接 404，而不是尝试找/blog/index.html - Apache：
.htaccess中若用了重写，检查RewriteRule是否拦截了所有子路径却没 fallback；临时重命名.htaccess测试是否恢复 - 前端路由项目（Vue Router / React Router）：二级页面是前端渲染的，但首次加载仍需服务端返回
index.html。确认 Nginx 的try_files $uri $uri/ /index.html;已配置，且没被其他 location 覆盖 - GitHub Pages：只支持根目录下
404.html，二级路径如/admin/必须真实存在该目录及其中的index.html，不能靠前端路由兜底
验证浏览器请求的真实路径与响应状态码
你以为你在访问 /products/widget.html，但 Network 面板可能显示它实际发起了 /products/widget.html?_t=123 或被重定向到了 /404.html。不看 Network，纯靠肉眼判断等于蒙眼修车。
操作步骤：
- F12 → Network → 刷新页面 → 找到触发 404 的那个请求（Status 列标红）
- 点开它 → Headers → 看 Request URL 是否和你预期一致；Response Headers → 确认 Status 是
404 Not Found，不是200 OK（后者是软 404，更难排查） - 右键该请求 → “Copy → Copy request URL”，粘贴进新标签页直访，排除 JS 重定向干扰
- 用
curl -I http://localhost:8080/products/widget.html看原始响应头，绕过浏览器缓存
检查 HTML 内部链接是否用相对路径导致跳转错位
一个常见陷阱：你在 index.html 里写 <a href="about.html"></a>，点击正常；但当你在 /blog/2024.html 页面里也写同样链接，浏览器会拼成 /blog/about.html，而非根目录下的 /about.html。
修复方式很简单，但极易被忽略：
- 所有跨目录跳转统一用绝对路径：
<a href="/about.html"></a>（开头带/） - 避免
../about.html这类相对路径，尤其当页面结构未来可能调整时 - 检查
<base href="/>%20%E6%A0%87%E7%AD%BE%E6%98%AF%E5%90%A6%E8%AF%AF%E8%AE%BE%EF%BC%8C%E5%AE%83%E4%BC%9A%E5%85%A8%E5%B1%80%E6%94%B9%E5%8F%98%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%20URL%20%E8%A7%A3%E6%9E%90%E5%9F%BA%E5%87%86 %0A - %E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%EF%BC%88%E5%A6%82%20Vite%E3%80%81Webpack%EF%BC%89%E8%8B%A5%E5%90%AF%E7%94%A8%E4%BA%86%20
base%20%E9%85%8D%E7%BD%AE%EF%BC%8C%E7%A1%AE%E4%BF%9D%E5%85%B6%E5%80%BC%E4%B8%8E%E9%83%A8%E7%BD%B2%E8%B7%AF%E5%BE%84%E4%B8%80%E8%87%B4%EF%BC%8C%E5%90%A6%E5%88%99%E7%94%9F%E6%88%90%E7%9A%84%20href%20%E5%92%8C%20src%20%E5%85%A8%E9%83%A8%E5%81%8F%E7%A7%BB %0A
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
