404错误是服务器明确告知请求路径不存在，需核对请求地址、服务器解析路径与实际文件位置三者是否一致；检查url协议（避免file://）、文件路径大小写、相对/绝对路径拼接、base标签配置、history模式fallback及network面板中真实响应。
404 错误不是页面坏了，而是服务器明确告诉你：“我收到了请求，但真找不到这个路径对应的东西”。处理它，核心是分清请求发到了哪、服务器以为该去哪、实际文件又在哪——三者对不上，就出 404。
检查浏览器地址栏的 URL 和本地文件路径是否匹配
很多人双击打开 index.html，看到地址是 file:///Users/xxx/index.html，然后在代码里写 location.href = "about.html"，一点击就 404。这是因为 file:// 协议下相对路径按文件系统解析，但一旦你换用 http://localhost，路径就变成按 Web 服务器根目录算。
- 确认你访问的是
http://localhost:8080/index.html这类地址，而不是file://路径 - 把 HTML 文件放进 Web 服务器的默认根目录：Apache 是
htdocs，Nginx 是/usr/share/nginx/html，Tomcat 是webapps/ROOT - 用终端进到该目录，执行
ls -l about.html确认文件名大小写和扩展名完全一致（About.html≠about.html）
排查前端跳转时的路径拼接陷阱
用 location.href = "user/profile" 这种相对路径跳转，结果却请求了 /admin/user/profile，是因为浏览器以当前 URL 为基准拼接。这不是 bug，是规范行为。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 改用绝对路径：
location.href = "/user/profile"（开头带/） - 动态构造更安全：
new URL("user/profile", window.location).href - 如果用了
<base href="/app/">，所有相对路径都会被前缀修正，务必确保它和构建配置（如 Vite 的base或 CRA 的homepage）完全一致
确认服务器是否配了 HTML5 History fallback
Vue Router / React Router 开启 history 模式后，/about 这种地址看起来干净，但刷新时浏览器直接向服务器要 /about —— 而真实磁盘上只有 index.html。没 fallback 就必然 404。
- Nginx 配置必须含：
try_files $uri $uri/ /index.html; - Apache 需启用
mod_rewrite，并在.htaccess中加重写规则 - 静态托管服务（Vercel、Netlify）默认支持，但自建 Nginx/Apache 几乎从不默认开启
用 Network 面板看清楚到底谁返回了 404
打开浏览器开发者工具 → Network 标签页，复现一次 404 请求，重点看三列：
-
Name列：确认请求的是不是你预期的路径（比如/api/user却被当成前端路由） -
Status列：是不是真 404，还是 401/403 被伪装成 404 -
Response Headers里的Content-Type：如果是application/json，说明后端框架（如 Express、Spring Boot）提前拦截了该路径并返回了错误 JSON，前端路由根本没机会跑
最常被忽略的一点：404 不一定是“文件不存在”，也可能是“文件存在但服务器没权限读”或者“配置把请求转发给了一个压根没部署的服务”。别急着删代码，先让 Network 告诉你第一手路径信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
