404大量出现的最常见原因是HTML中静态资源路径与实际文件位置不匹配，需通过Network面板定位首个404请求，检查相对/绝对路径、大小写、构建输出结构及托管平台404配置是否正确。
检查静态资源引用路径是否匹配实际文件位置
404大量出现，最常见原因是 HTML 中 <img>、<link>、<script> 标签的 src 或 href 路径与服务器上真实文件位置不一致。浏览器 Network 面板里看到的 404 请求路径（如 /css/style.css）就是关键线索。
常见问题包括：
- 路径写成相对路径但页面不在预期目录下（例如 index.html 在根目录，而 blog.html 在
/posts/下，却仍用css/style.css） - 误用绝对路径但未以
/开头（css/style.css是相对于当前 URL，/css/style.css才是相对于根目录） - 文件实际在
assets/css/，但 HTML 写了css/style.css - 大小写错误：macOS/Linux 区分大小写，
Image.png和image.png是两个文件
确认静态托管平台对 404 页面的配置是否生效
静态站点没有后端路由逻辑，所以“页面不存在”必须靠托管平台自动返回 /404.html —— 但这个机制不是默认就工作的，得按平台规则放对位置、起对名字、配对响应头。
实操要点：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- GitHub Pages 要求文件名严格为
404.html，且必须放在仓库根目录（不是pages/404.html或src/404.html） - Netlify 需要显式声明重定向规则：在
_redirects文件中加一行/* /404.html 404，或在netlify.toml中配置[[redirects]] from = "/*" to = "/404.html" status = 404 - Vercel 默认支持，但前提是项目根目录存在
404.html；若用了vercel.json，需确保没覆盖掉默认 fallback 行为 - 无论哪种平台，都必须用浏览器直接访问一个不存在的路径（如
/this-does-not-exist）来验证——不能只打开/404.html，那只是个普通 200 页面
排查构建工具是否遗漏或错位输出静态文件
如果你用 Hugo、Jekyll、VuePress 或 Vite 构建站点，生成的 dist 或 _site 目录结构必须和 HTML 中写的路径对齐。构建过程可能把 CSS 放进 /assets/css/，但模板仍引用 /css/，结果全 404。
建议步骤：
- 进入构建输出目录（如
dist/），手动检查index.html引用的每个src/href路径是否存在对应文件 - 确认构建配置中
base或publicDir设置正确；例如 Vite 的base: "/my-project/"会让所有资源路径自动加前缀 - 如果用了 CSS/JS 哈希（如
style.a1b2c3.css），确保 HTML 中的引用是构建后自动注入的，而不是手写的固定文件名 - 检查
.gitignore是否误删了dist/或_site/中的关键子目录（比如忽略了assets/）
用开发者工具定位首个失败请求并逆向追踪
大量 404 往往有源头：一个 404 的 JS 文件执行失败，导致后续依赖它的代码不运行，连带让图片加载逻辑失效，看起来“全挂了”。Network 面板里第一个红色 404 就是突破口。
操作建议：
- 打开 DevTools → Network → 刷新页面 → 点击任意一个 404 请求 → 查看 “Initiator” 列，它会指出是哪个 HTML 行、哪个 JS 文件触发了这次请求
- 如果是 JS 报错引发的连锁 404（比如
document.getElementById('main').src = '/img/' + name + '.png'中name是空或拼错），就得查 JS 逻辑，而不是光改路径 - 禁用缓存再刷新（Network 面板勾选 “Disable cache”），避免看到的是旧的 404 缓存响应
- 对比本地
file://打开和部署后https://访问的行为差异——很多路径问题只在 HTTP 环境暴露
真正卡住人的地方，往往不是“找不到 404 页面”，而是构建产物和引用路径之间差了一个 /、一次大小写、或一层目录嵌套。每次改完别急着重新部署，先在本地 dist/ 目录里用 Python 起个简单 HTTP 服务（python3 -m http.server 8000）跑一遍，能省掉一半线上排查时间。
