根本原因是css中url()路径以构建后css文件位置为基准解析，而图片被重排目录导致相对路径失效；需通过minicssextractplugin.publicpath配置修正或改用public目录+绝对路径。
根本原因不是“CSS写错了”，而是构建工具把图片路径重写了，而你的 url() 还按开发时的相对位置在找——两者对不上。
Webpack/Vue CLI 打包后 background-image 路径多了一层 static
这是最典型的路径错位：CSS 文件被输出到 dist/static/css/app.[hash].css，而图片被输出到 dist/static/img/bg.[hash].png；但 CSS 里写的 url('./img/bg.png') 会被解析成相对于 CSS 文件位置，即 dist/static/css/./img/bg.png → 实际请求路径变成 dist/static/css/img/bg.png（404），而不是正确的 dist/static/img/bg.png。
- 根本矛盾：CSS 中的
url()是相对路径，但构建后资源物理位置已变，且不再保持原始目录结构 - webpack 默认用
publicPath控制产出资源的引用前缀，但 ExtractTextPlugin 或 MiniCssExtractPlugin 的publicPath配置常被忽略或设错 - Vue CLI 3+ 用户应优先改
vue.config.js中的publicPath，而非去动build/utils.js（该文件在新版中已移除） - 示例修正：
module.exports = { publicPath: './' }—— 表示所有静态资源（包括 CSS 里的url()）都相对于 HTML 文件所在目录解析
Vue / Vite 项目中用了 src/assets 但 CSS 里写相对路径
src/assets 下的图片会被构建工具处理（加哈希、重命名、挪目录），但直接写 url('assets/bg.png') 不会触发模块解析，只是纯字符串替换，结果就是请求一个根本不存在的路径。
- 错误写法：
background: url('./assets/bg.png')→ 构建后仍原样保留，但真实文件名已变成bg.abc123.png - 正确做法：把图挪到
public/目录下，然后用绝对路径：background: url('/assets/bg.png') - Vite 用户注意：
publicDir默认是public，且base设为'./'时，/assets/会相对于当前 HTML 解析，适合子目录部署 - 不推荐在 CSS 里 import 图片再插值——CSS 不支持 JS 模块导入，只有内联 style 或 CSS-in-JS 才能用
url(${import})
Django 模板里 CSS 的 url() 写成了相对路径
Django 开发服务器不代理跨目录静态资源，url('images/bg.jpg') 在 CSS 文件里会被解析为相对于 CSS 文件路径，但 Django 的 STATIC_URL 是 /static/，所以必须显式对齐。
- 错误：
background-image: url('images/bg.jpg')→ 请求/static/css/images/bg.jpg（404） - 正确：
background-image: url('/static/images/bg.jpg')→ 请求/static/images/bg.jpg，与STATIC_URL完全一致 - 别信“和 HTML 里
{% static %}写法一样”——那是模板语法，CSS 里没这玩意儿，url()就是纯路径字符串 - 如果启用了
DEBUG=False但没配好collectstatic，连/static/这个前缀本身都 404，先确认静态服务是否启用
真正卡住人的，往往不是“不知道怎么写”，而是没意识到：CSS 里的 url() 是构建阶段就固化下来的字符串，它不会像 JS import 那样动态解析模块。路径对不对，得看构建产物里实际生成的 CSS 内容，而不是源码里你“以为”的样子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
