404错误源于服务器返回“未找到路径”，修复关键在路径计算、服务端配置及部署一致性：需用绝对路径或new url处理跳转；history模式须配nginx/apache fallback；同域时防后端路由拦截；base标签须与构建配置一致。
404错误不是浏览器“解析HTML出错”，而是浏览器发出了一个HTTP请求，服务器明确回应“没找到这个路径”。修复重点从来不在HTML语法，而在路径计算、服务端配置和部署一致性上。
location.href 跳转时相对路径拼错了
用 location.href = "user/profile" 这种写法，浏览器会以当前页面URL为基准拼接。比如当前在 /admin/，实际请求的是 /admin/user/profile，而非你想要的根路径。
- 改用绝对路径：
location.href = "/user/profile"（开头带/） - 动态拼接更可靠：
new URL("user/profile", window.location).href，自动处理上下文，不依赖当前路径结构 - 别写
./user/profile——./在某些构建工具或CDN环境下会被忽略，行为不一致
Vue Router / React Router 的 history 模式没配服务端 fallback
前端路由启用 history 模式后，URL 看起来干净（如 /about），但刷新时浏览器直接向服务器发起请求。若 Nginx/Apache 没 fallback，就会返回 404。
- Nginx 配置必须含：
try_files $uri $uri/ /index.html;，且放在location /块内 - Apache 需启用
mod_rewrite，并在.htaccess中加重写规则，把非静态资源请求导向index.html - Vercel/Netlify 默认支持；但本地用
npx serve或python -m http.server不支持，必须换vite preview这类带 history fallback 的工具
后端路由拦截了前端跳转路径
前后端同域部署（如都走 https://api.example.com）时，前端跳到 /order/list，结果被后端 Express/Spring Boot 的同名 API 路由提前捕获，返回 JSON 或 404，前端路由根本没机会执行。
- 打开开发者工具 → Network 标签页 → 找那个 404 请求 → 看 Response Headers 中
Content-Type是application/json还是text/html - 如果是前者，说明后端已响应，需调整后端路由优先级（例如把 API 路由加前缀
/api/），或给前端路由统一加前缀（如/app/order/list） - 查后端日志，确认该路径是否真有 handler，避免“撞名”覆盖
<base> 标签与构建配置不一致
<base href="/subapp/"> 会影响所有相对路径解析，包括 location.href、<script src></script> 和 CSS 中的 url()。漏写、多写斜杠、或跟 Vite/CRA 构建配置不一致，都会导致跳转和资源加载双双失效。
- 查看 HTML 源码，确认是否存在
<base>标签，且href值与部署路径完全一致（注意结尾斜杠） - Vite 项目检查
vite.config.ts中base是否设为"/subapp/"；CRA 项目检查package.json的homepage字段 - 若未使用子路径部署，就别写
<base>—— 多数现代构建工具默认不需要它
最容易被忽略的是：404 请求的路径，往往不是你在代码里写的那串字符串，而是浏览器根据当前 URL + base + 相对路径规则算出来的最终地址。不看 Network 面板里的真实请求 URL，只盯着 JS 代码改，90% 的时间都在白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
