根本原因是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 路径部分拼接。
- 和解析结果一模一样（虽然一个跳转、一个加载失败）
-
../不是“返回上一级文件夹”，而是字符串裁剪：从当前 HTML URL 中删掉最后一段路径名（不含/），再拼你写的路径 - 所以
https://a.com/blog/post.html里写src="../data.json"→https://a.com/data.json，不是https://a.com/blog/data.json
大型项目该用相对路径还是 /xxx
选 /xxx，但前提是构建和部署链路可控；否则嵌套越深，../../../ 越容易数错、改错、漏改。
- 本地开发调试：优先用不带
/的相对路径（css/main.css、../js/app.js） - 构建后部署上线：统一用根相对路径（
/css/main.css、/js/app.js），配合构建工具（如 Vite、Webpack）的base配置 - 引用 CDN 或跨域资源：必须用完整 URL（
https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js）
真正容易被忽略的是：路径问题从来不是“写对就行”，而是“当前 HTML 的 URL 是什么”和“目标文件物理位置在哪”这两点必须同时确认——Network 面板里看到的 404 请求地址，就是唯一可信的比对依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
