直接看network面板中404请求的request url即可定位资源路径问题，该url即浏览器实际请求地址，需比对部署结构、检查大小写与扩展名、验证服务器物理路径是否存在。
直接看 Network 面板里请求的真实 URL
浏览器不关心你“想”访问哪，只按它算出来的地址发请求。打开 F12 → 切到 Network 标签页 → 刷新页面 → 找那个标红的 404 请求（比如 style.css 或 img/logo.png），点开它，看 Request URL 字段。这个地址就是问题根源。
常见错位现象：
-
href="css/style.css"在/blog/post.html中，实际请求的是http://localhost/blog/css/style.css（不是你项目根目录下的/css/） -
src="../images/icon.jpg"在子目录 HTML 文件中，多退了一级，指向了不存在的上级目录 - 本地双击打开 HTML（
file://协议），相对路径可能被浏览器拦截或解析异常，Network 里甚至看不到请求
确认路径基准是 HTML 文件的 URL，不是编辑器里的文件夹结构
VS Code 里把 index.html 和 script.js 拖进同一个文件夹，不代表浏览器会按这个结构找资源。路径永远相对于当前页面的完整 URL。
例如：
- 当前地址是
http://localhost:3000/admin/users.html，那么src="js/app.js"会被解析为http://localhost:3000/admin/js/app.js - 想固定从根目录开始找，必须写成
src="/js/app.js"（开头带/） - 用
<base href="/app/">后，所有相对路径都以/app/为基准，但容易和构建配置（如 Vite 的base）不一致，导致批量失效
检查大小写、扩展名和隐藏后缀
Windows 上双击文件可能自动加上 .txt 后缀，而资源管理器默认不显示扩展名；Linux 服务器对大小写敏感，Logo.png ≠ logo.png。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
排查要点：
- 在文件管理器中启用「显示文件扩展名」，确认 HTML/CSS/JS 图片文件真实后缀是
.html、.css、.png，不是.html.txt - 在终端用
ls -la（macOS/Linux）或dir（Windows）核对文件名大小写是否与代码中完全一致 - 避免在文件名中使用空格、中文、括号等特殊字符，统一用小写字母 + 短横线，如
user-profile.png
验证服务器是否真能访问到那个物理路径
看到 Request URL 后，手动把它粘贴进浏览器地址栏回车——如果还是 404，说明文件没放对位置，或服务器配置没映射过去。
关键检查点：
- Apache：确认
DocumentRoot指向你期望的根目录，且DirectoryIndex index.html已启用 - Nginx：确认
root配置与请求路径匹配，静态资源路径不能漏掉/开头 - Tomcat：HTML 文件必须放在 Web 应用的根目录下（如
webapps/yourapp/index.html），不能放在WEB-INF里 - 本地开发服务器（Vite/webpack-dev-server）：默认支持 history fallback，但若用了自定义 server，需手动加
rewrites或fallback
最常被忽略的一点：你以为文件放在了正确目录，其实编辑器没保存，或者构建工具（如 Vite）输出到了 dist/，但你却在源码目录下启动了服务器。先 ls 或 dir 看一眼目标路径里到底有没有那个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
