根本原因是file://协议将/解析为磁盘根目录而非项目根目录；唯一可靠解法是启动本地HTTP服务器（如python3 -m http.server 8000）或全部改用相对路径。
本地双击打开 HTML 时资源总 404 怎么办
根本原因是浏览器用 file:// 协议解析路径，/images/logo.png 会被当成 file:///images/logo.png（即磁盘根目录），而你文件实际在 file:///D:/project/images/logo.png。
- 必须改用纯相对路径：
images/logo.png或../assets/css/main.css -
./可省略，./index.html和index.html效果一样 - 别信“本地跑通了就 OK”——只要没起 HTTP 服务，
/xxx就是假稳定 - 开发阶段建议统一用相对路径，避免误判部署表现
部署到 Nginx/Apache 后资源突然 404
上线后 /css/app.css 404，大概率是服务器根目录没配对，或者构建工具的 base 配置漏了。
-
/开头的路径永远指向域名根目录（如https://site.com/），和 HTML 文件在哪无关 - Vite 项目需确认
vite.config.js中base: '/'（默认值）；Webpack 要检查output.publicPath - Nginx 配置里
root或alias必须匹配你写的/xxx实际落盘位置 - 如果部署子路径（如
https://site.com/myapp/），路径必须改成/myapp/css/app.css，并同步调整构建配置
src 和 href 的路径解析规则真的一样吗
完全一样。浏览器不区分语义，只按一套逻辑拼 URL：
- 先看是否以
/开头 → 否则看是否以http://或https://开头 → 否则基于当前 HTML 的完整 URL 路径部分拼接 -
../不是“返回上一级文件夹”，而是字符串裁剪：从当前 HTML URL 中删掉最后一段路径名（不含/），再拼你写的路径 - 例如
https://a.com/blog/post.html里写src="../data.json"→ 解析为https://a.com/data.json，不是https://a.com/blog/data.json
大型项目该用相对路径还是 /xxx
选 /xxx，但前提是构建和部署链路可控；否则嵌套越深，../../../ 越容易数错、改错、漏改。
立即学习“前端免费学习笔记（深入）”；
- 模板被多个路由复用（如
/admin/users和/blog/2024）时，/js/app.js比../../js/app.js更可靠 - 同一项目中一个页面用
/css/，另一个用../css/，维护成本陡增 - 真正难的不是写法本身，而是让所有环节（开发、构建、部署、CDN 缓存）对“根目录”理解一致
Request URL，再和你磁盘里的实际路径逐段比对——尤其是大小写、空格、不可见字符，这些细节不会报错，但会让资源永远加载不出来。 
