404问题主因是资源路径、部署结构或服务器映射不一致，需查network请求地址、服务器文件真实路径（注意大小写）、web服务器root/alias/location配置是否匹配。
上线后出现404，基本不是代码逻辑问题，而是资源路径、部署结构或服务器映射没对齐。重点查三件事：浏览器 Network 里报错的完整请求地址、文件在服务器上的真实位置、Web 服务是否按预期解析该路径。
看 Network 面板确认具体哪个 URL 返回了 404
打开浏览器开发者工具（F12）→ Network 标签 → 刷新页面 → 找 Status 为 404 的请求项。关键要看：
-
Initiator列：是 HTML 中的<img src="...">、<script src="..."></script>，还是 JS 里fetch("/api/user")发起的？定位到源头才能改对地方 -
Name列：完整请求路径，比如/assets/logo.png或/static/js/app.js—— 这个路径是相对于域名根目录（http://yoursite.com/）算的，不是相对于 HTML 文件位置 -
Preview或Response：如果显示的是自定义错误页内容，但状态码仍是404，说明服务端配置没问题；如果返回空白或乱码，可能是权限或 MIME 类型问题
核对服务器上文件的实际路径和大小写
Linux 服务器严格区分大小写，Windows 本地开发时可能不暴露问题，一上线就崩。例如：
- HTML 中写
<link rel="stylesheet" href="/CSS/main.css">，但服务器上实际目录名是css（全小写）→ 404 - 图片文件名为
Logo.png，而src写成logo.png→ 404 - 构建产物（如 Vite 或 Webpack 输出）默认生成到
dist目录，但 Nginx 的root指向了上层目录 → 所有静态资源路径全错
用 SSH 登录服务器，执行 ls -l /var/www/html/assets/（路径按你实际部署位置替换），逐级确认每一级目录名、文件名、扩展名是否完全一致。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
检查 Web 服务器的 root / alias / location 配置是否匹配部署结构
Nginx 和 Apache 不会自动“猜”你要访问哪个文件夹。常见错配：
- Nginx 的
root设置为/var/www/html，但你的 HTML 文件放在/var/www/html/myapp/index.html，却用http://yoursite.com/index.html访问 → 实际应访问/myapp/index.html或把root改成/var/www/html/myapp - 用了
alias但末尾斜杠不一致：location /static/ { alias /data/static/; }是对的；若写成alias /data/static;（缺末尾/），会导致请求/static/js/app.js映射成/data/staticjs/app.js→ 404 - Apache 的
DocumentRoot指向正确，但<directory></directory>块里没开Require all granted，导致 403 误判为 404（尤其在 CentOS 8+ 默认更严格）
验证构建工具输出路径与线上路由前缀是否一致
前端打包工具（Vite、Vue CLI、Create React App）常需显式配置 base 或 homepage，否则生成的 index.html 里资源路径默认从根目录开始，和实际部署子路径冲突。例如：
- 项目部署在
https://yoursite.com/admin/，但 Vite 的vite.config.ts没设base: '/admin/'→index.html里仍写<script type="module" src="/assets/index.abc123.js"></script>→ 请求/assets/...而非/admin/assets/...→ 404 - Create React App 的
package.json中"homepage": "."会让所有资源路径变成相对路径（如./static/js/main.js），在子路径下可能因 base URL 解析异常失效
上线前务必检查构建产物中 index.html 的 <script></script> 和 <link> 标签里的 src/href 值，是否与你访问页面时的 URL 前缀匹配。
最容易被忽略的是：Nginx/Apache 日志里其实记了每次 404 对应的真实文件系统查找路径，比如 open() "/var/www/html/css/main.css" failed (2: No such file or directory) —— 这比猜快十倍。别跳过日志。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
