根本原因是file://协议下以/开头的路径被解析为磁盘根目录，应改用纯相对路径（如images/logo.png）；开发必须通过http://localhost启动本地服务，避免误判部署表现。
本地双击打开 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”——只要没起服务器，
/xxx就是假稳定 - 开发阶段建议统一用相对路径，避免误判部署表现
部署到 Nginx/Apache 后资源加载失败
上线后 /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 路径部分拼接。
-
<a href="about.html"></a>和<img src="about.html">解析结果一模一样（虽然一个跳转、一个加载失败） -
../不是“返回上一级文件夹”，而是字符串裁剪：从当前 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更可靠 - CI/CD 流程中，确保构建产物的静态资源全部落在网站根目录下（或子路径下，且
base同步更新） - 混合使用会放大混乱：一个页面用
/css/，另一个用../css/，维护成本陡增 - 真正难的不是写法本身，而是让所有环节（开发、构建、部署、CDN 缓存）对“根目录”理解一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
