404错误表示服务器已收到请求但未找到对应资源，核心是请求url与服务端实际路径不匹配；需通过network面板确认真实request url，排查路径拼写、路由配置、base标签及部署环境是否一致。

404错误不是“页面打不开”，而是服务器明确返回了404 Not Found状态码——它说明请求地址被发出去了，但服务端找不到对应资源。真正要查的，是那个被发出去的地址到底是什么、为什么找不到。

看 Network 面板里真实的 Request URL

别信地址栏，也别猜 href 里写的对不对。F12 → Network → 刷新页面 → 找标红的 404 请求项 → 点开 → 看 Headers 标签页里的 Request URL。

• 这个 URL 就是浏览器实际发出的完整请求地址，也是你要校验的唯一事实依据
• 如果它是 http://localhost/css/style.css，但你的文件实际在 assets/css/style.css，那就得改 HTML 中的 <link href="assets/css/style.css">
• 如果它是 http://localhost/blog/post，而你本地没配服务端 fallback（比如 Nginx 缺 try_files），那 history 模式下刷新必 404
• 右键该请求 → Copy → Copy full URL，粘贴到新标签页直访：能打开说明原页面 JS 或 CSP 干扰了；还是 404，就说明路径本身无效

确认你真在 HTTP 环境下测试

双击 HTML 文件打开，地址栏显示 file:/// 开头？那压根没走服务器，不可能触发真正的 404。这种场景下出问题，只会报 Not allowed to load local resource 或空白页。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须用 Web 服务访问：python -m http.server 8000、npx serve -s、vite preview 或 XAMPP/WAMP
• VS Code Live Server 插件启动后，请直接用它输出的 http://127.0.0.1:xxxx/ 地址，不要把 HTML 拖进浏览器
• GitHub Pages、Netlify 等平台部署后，务必用真实域名访问，file:// 或本地预览无法模拟其路由逻辑

检查相对路径拼接是否被上下文带偏

location.href = "user/profile" 这种写法极度危险——它完全依赖当前页面 URL 来拼。当前在 /admin/ 下，就会变成 /admin/user/profile；当前在 /blog/2023/ 下，就变成 /blog/2023/user/profile。

• 优先用绝对路径：location.href = "/user/profile"（开头带 /）
• 动态构造更可靠：new URL("user/profile", window.location).href，自动按当前 URL 基准解析
• 避免 ./ 前缀：部分构建工具或服务器会忽略它，行为不一致
• 留意 <base href="/subapp/">：它会全局影响所有相对路径，包括 location.href、<script src></script> 和 CSS 里的 url()；若构建配置（如 Vite 的 base）和 HTML 中的 <base> 不一致，跳转和资源加载会双双失效

区分真 404 和假 404

Network 面板里看到 404，不代表就是路径问题。先看响应头里的 Content-Type：

• 如果是 text/html，说明是前端路由或静态文件缺失，继续查路径和 fallback 配置
• 如果是 application/json 或 application/problem+json，说明请求被后端 API 路由拦截了（比如 Express 定义了 /order/list 接口），前端根本没机会执行
• 状态码为 0？大概率是跨域、file:// 协议限制，或目标站主动断连，和拼写无关
• 返回 200 却显示 “404 页面”？那是服务端渲染的伪 404，检查服务器是否漏配 error_page 或 ErrorDocument，导致本该返回 404 状态码却返回了 200 + 自定义 HTML

最容易被忽略的点：你以为在修链接，其实是在调服务器配置；你以为改对了路径，却忘了 <base> 标签或构建工具的 base 设置正在悄悄覆盖它。真实请求路径、服务端响应逻辑、前端运行时上下文——这三者必须对齐，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！