浏览器解析的href路径始终以html文件url为基准，而非css文件位置或项目根目录；css内部url()则以最终生成的css文件位置为基准，二者路径系统相互独立。
看 Network 面板里的 Request URL 是什么
浏览器不会告诉你“路径写错了”，只会返回 404 Not Found。打开 DevTools → Network → 刷新页面 → 筛选 css，点开失败的请求，重点看 Request URL 这一项——它就是浏览器实际去请求的地址，也是你修复路径的唯一依据。
常见现象包括：
-
https://site.com/blog/css/style.css（但你的 CSS 实际在/public/css/）→ 说明 href 写的是相对路径，而 HTML 在/blog/下，导致基准偏移 -
file:///css/style.css（双击 HTML 打开时）→/在file://协议下指向磁盘根目录，必然 404 -
https://site.com/css/style.css返回 404，但文件实际在/static/css/style.css→ 绝对路径没对齐部署结构
确认 href 路径的计算基准是 HTML 文件位置
<link> 的 href 永远以当前 HTML 文件所在的 URL 为起点解析，不是模板位置、不是 CSS 源码位置、也不是你本地项目根目录。
例如：
- HTML 在
/pages/a/b.html，CSS 在/css/style.css→ 正确写法是href="../../css/style.css" - HTML 在
/index.html，CSS 在/css/style.css→ 写href="css/style.css"或href="/css/style.css"都行，但语义不同：/css/是站点根路径，css/是相对路径 - 用 PHP 模板包含
header.php，而header.php里写了href="style.css"→ 实际基准仍是最终渲染出的 HTML URL，不是header.php文件位置
构建后 CSS 里的 url() 为啥还是 404
CSS 文件内部的 url("logo.png") 或 @import，解析基准是**最终生成的 CSS 文件所在位置**，和 <link> 完全无关。开发时可能正常，build 后抽离到 dist/css/app.css，图片却在 dist/img/，相对路径就断了。
解决方式取决于构建工具：
- Vite 项目：图片放
src/assets/，优先用@import "@/assets/logo.png"或 JSimport；放public/下的资源，直接写url("/logo.png") - Webpack/Vue CLI：配
MiniCssExtractPlugin的publicPath，比如 CSS 输出到dist/css/、图片在dist/img/，就设publicPath: "../" - 别在 SCSS/Less 里硬写
url("../img/logo.png")—— 构建层级一变，../就失效
别混淆 / 在不同环境下的含义
/css/style.css 在 HTTP 服务（如 Vite dev server、Nginx）下指向站点根目录；但在 file:// 下指向 C:/ 或 /，根本找不到文件。本地双击 HTML 测试时，所有带开头 / 的路径都会失败。
更稳妥的做法：
- 开发阶段统一用相对路径（如
css/style.css），配合构建工具的base配置（Vite 设base: "./"，Webpack 设output.publicPath: "./"） - 上线前检查构建产物中 HTML 的
href值是否与实际部署路径匹配（比如部署到子路径/my-app/，Vite 需设base: "/my-app/"） - 绝对路径只在明确控制服务器根目录时使用，且必须确保
/css/确实对应物理webroot/css/
最常被忽略的一点：CSS 文件内部的 url() 和 HTML 中的 <link href> 是两套独立路径系统，修一个不等于另一个也好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
