href相对路径的基准永远是当前HTML文件的URL，浏览器按URL路径拼接href值，与项目结构无关；本地双击打开时file://协议行为异常，须用本地服务器验证；构建后路径需与产物物理路径严格一致。
href相对路径的基准永远是当前HTML文件的URL，不是项目结构
浏览器解析 href 时，根本不管你的 VS Code 里文件怎么摆放，只看当前页面地址栏里的完整 URL。比如页面 URL 是 https://example.com/blog/article.html，那么 href="css/style.css" 就一定会请求 https://example.com/blog/css/style.css——哪怕你在编辑器里把 article.html 和 style.css 放在同一级目录下。
这种“视觉上对、运行时错”的情况，是开发者最常踩的坑。尤其在 SPA 中用前端路由（如 /user/profile）但 HTML 文件其实只有一份（/index.html），此时相对路径仍以 /index.html 的位置为准，和地址栏显示的路径无关。
移动 HTML 文件后，所有相对 href 都得重算
相对路径本质是字符串拼接：浏览器拿当前 URL 的路径部分，去掉最后一段（文件名），再拼上 href 值。所以：
-
href="style.css"→ 同级目录 -
href="../css/style.css"→ 上一级的css/目录 -
href="../../assets/css/main.css"→ 往上退两级再进子目录
一旦你把 HTML 从根目录挪到 /pages/ 下，原来写死的 href="css/style.css" 就全变成指向 /pages/css/，而实际 CSS 可能还在 /css/ ——直接 404。
立即学习“前端免费学习笔记（深入）”；
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
本地双击打开 HTML 时相对路径行为异常
用 file:// 协议打开，浏览器对 ./ 和 ../ 的解析不一致，有些版本会静默失败或跳过请求。更麻烦的是，它不走 HTTP 协议栈，无法触发服务器重定向、CORS 或 MIME 类型校验，导致问题“本地看着好，一上服务就崩”。
必须用本地服务器验证：
- Python：
python -m http.server 8000 - Vite：
vite preview - Node：
npx serve
只有这样，才能看到 Network 面板里真实的请求 URL 和状态码。
构建工具输出路径和源码路径不一致
Vite、Webpack 默认把 public/ 下的文件原样复制到输出目录根，而 src/assets/ 下的资源会被哈希重命名并扁平化处理。如果你在源码里写 href="src/assets/style.css"，构建后这个路径根本不存在；正确做法是用 import "@/assets/style.css" 让构建工具自动注入带 hash 的 href，或者把 CSS 放进 public/css/style.css 再写 href="/css/style.css"。
关键点：你写的 href 值，必须和构建产物中最终生成的文件物理路径完全匹配，大小写、斜杠方向、有无前导点都不能错。
