根本原因是css中url()路径以最终生成的css文件位置为基准，而非html或源文件；构建后css与图片目录分离导致相对路径失效，需通过minicssextractplugin.publicpath等配置修正路径映射。
根本原因不是路径写错了，而是你误把 CSS 文件当成了“配角”——url() 里的相对路径永远以最终生成的 CSS 文件位置为起点，不是 HTML、不是源 SCSS、也不是你当前编辑器里打开的文件夹。
为什么 url("../img/logo.png") 在开发时能跑，构建后就 404
因为开发时 CSS 可能还内联在 HTML 里或没抽离，路径基准模糊；构建后 Webpack/Vite 把 CSS 单独输出到 dist/css/，而图片被复制到了 dist/img/。这时 url("../img/logo.png") 就会去请求 dist/css/../img/logo.png → dist/img/logo.png，看似对，但实际可能多退一级（比如 CSS 输出在 dist/assets/css/）或少退一级（图片在 dist/assets/img/）。
- 打开
dist目录，肉眼数清楚：CSS 文件到目标图片之间，要向上退几级、再进几个文件夹 - 不要在源码里硬写
../—— SCSS 中写url("../img/logo.png")，构建后可能因抽离层级变化而失效 - 用浏览器 Network 面板看报错请求的
Request URL，它才是真实路径基准的“判决书”
MiniCssExtractPlugin 的 publicPath 怎么设才不翻车
这个配置才是真正控制最终 CSS 里所有 url() 路径重写的开关，优先级高于 output.publicPath。它必须匹配 CSS 文件在服务器上的 URL 位置与资源（图片、字体）之间的相对关系。
- 如果 CSS 地址是
/css/app.css，图片地址是/img/logo.png，那publicPath应设为"../" - 如果 CSS 在
/assets/css/app.css，图片在/assets/img/logo.png，那publicPath应设为"../img/"或空字符串""（取决于 loader 是否已处理好） - Vue CLI 2 项目改
build/utils.js中ExtractTextPlugin.extract()的publicPath；Vue CLI 3+ / Vite 不走这套，应统一用public/目录 +url("/logo.png") - 别同时设
output.publicPath和MiniCssExtractPlugin.publicPath，后者会覆盖前者，且更精准
SCSS 里写 url("./icon.svg") 为什么有时无效
Webpack 默认只对 @import 做模块解析，url() 里的路径默认不走 loader 处理链，除非你显式开启 css-loader 的 url 选项（默认是 true，但容易被自定义配置关掉）。
- 确认
css-loader配置中options.url为true（或未显式设为false） - 避免用
~@/assets/这类 Webpack 别名写法 —— Vite 不支持，且部分 loader 会忽略~ - 更稳的做法：把图片路径定义成 SCSS 变量，用
#{$img-icon}插值注入，绕过构建工具路径解析，让最终 CSS 里写死的是你想要的路径 - 如果用了
public/目录（Vite）或static/（Vue CLI），直接写url("/icon.svg")，不用../或./
@font-face 中 src 的尾随逗号和大小写陷阱
这不是路径问题，但会导致字体静默失败——Network 面板里看不到请求，DevTools 也不报错，font-family 声明完全无效。
-
src属性里多个url()必须用逗号分隔，但末尾**不能有逗号**，否则整个声明被浏览器忽略 - 文件扩展名和
format()参数必须严格对应：.woff2→format('woff2')，.ttf→format('truetype')，不能写成format('ttf') - 路径中的文件名大小写必须和磁盘上完全一致（Linux/macOS 服务器区分大小写）
- 本地双击 HTML 打开时，Chrome 会拦截字体请求并报
Access to font at 'xxx' from origin 'null'，必须起 HTTP 服务（如 Live Server）才能调试
最麻烦的不是写错一次路径，而是路径逻辑在开发、构建、部署三个阶段表现不一致；关键不是背规则，而是每次改完立刻打开 Network 面板，看浏览器到底发了什么请求——它不会说谎，只是你没听清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
