link 标签 href 404 是因浏览器以当前 html url 为基准解析路径，而非模板或文件系统位置；css 中 url() 和 @import 则以 css 文件自身位置为基准，构建后路径易错乱；需统一用绝对路径、配准 publicpath 或交由构建工具处理。
link 标签 href 路径为什么总 404
浏览器解析 <link> 的 href 时，起点永远是当前 HTML 文件所在的 URL 路径，不是 PHP 模板位置、不是 CSS 文件位置、也不是你本地文件系统里的“看起来应该对”的位置。
比如访问 https://site.com/blog/post.html，HTML 里写 href="css/style.css"，浏览器就会请求 https://site.com/blog/css/style.css —— 即使你的 style.css 实际在 /public/css/ 下，也必然 404。
- 用开发者工具 Network 面板点开失败的 .css 请求，直接看
Request URL是什么，反推它从哪开始算的 - 避免在 PHP/模板中用
./或../拼路径，尤其跨目录 include 时极易错层 - 线上环境统一用以
/开头的绝对路径：href="/css/style.css"，前提是服务器静态资源确实放在 webroot 的/css/目录下 - WordPress 等 CMS 推荐用函数生成路径：
href="<?php echo get_template_directory_uri(); ?>/css/style.css"
CSS 里 url() 和 @import 为啥和 HTML 不同步
url()（如 background-image: url("logo.png")）和 @import 的路径基准，不是 HTML，而是**最终生成的 CSS 文件所在位置**。开发时可能碰巧对，构建后抽离到 dist/css/，图片却在 dist/img/，相对路径就全乱了。
- 构建后打开
dist目录，肉眼数清楚 CSS 文件和图片之间的层级关系：比如 CSS 在dist/css/app.css，图片在dist/img/logo.png，那url()就该写url("../img/logo.png") - Vue CLI / Webpack 项目，别硬写
../，改MiniCssExtractPlugin的publicPath，例如设为"../"，让插件自动重写所有url() - Vite 项目，
src/assets/下的图片优先用@import "@/assets/logo.png"或 JSimport，交给构建器处理；public/下的资源则直接写url("/logo.png") - CSS 内部少用
@import，尤其跨目录时——它的路径基准是当前 CSS 文件，和<link>完全不一致
Webpack/Vite 中 css-loader 和 MiniCssExtractPlugin 的 publicPath 怎么配
css-loader 负责解析 url() 并定位源文件，MiniCssExtractPlugin 负责把 CSS 抽出来并重写其中的资源路径。两者路径配置不一致，就会出现“开发能跑，build 后 404”。
-
css-loader默认开启url: true，不用额外配；它的context默认是项目根目录，确保url("./assets/logo.png")能找到src/assets/logo.png -
MiniCssExtractPlugin的publicPath必须匹配最终 CSS 在线上的 URL 位置：如果 CSS 地址是/css/app.css，图片地址是/img/logo.png，那publicPath就得设成"../" - 不要同时设
output.publicPath和MiniCssExtractPlugin.publicPath，后者优先级更高，且更精准；设错会导致所有图片路径多跳或少跳一级 - Vite 中没有
MiniCssExtractPlugin，靠build.rollupOptions.output.assetFileNames控制输出名，但路径映射由public/目录和base配置决定，url()写法必须和vite.config.js的base对齐
调试时最容易被忽略的三个细节
很多问题不是路径写错了，而是被缓存、权限或协议掩盖了真实原因。
- 本地双击打开 HTML 用
file://协议时，浏览器会拒绝加载跨目录 CSS（安全限制），必须起本地服务：python3 -m http.server或vite preview - 服务器返回 403 而不是 404？检查文件权限（如 Linux 上
chmod 644 style.css）和 Nginx/Apache 是否允许访问该路径（比如location ~ \.css$规则误拒） - Network 面板看到 CSS 请求状态是
(failed)或0？大概率是跨域或 MIME 类型错误，确认响应头Content-Type: text/css，不是text/plain或空
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
