Webpack 打包后 background-image 路径变为 static/img/xxx.png 是因 file-loader 默认将资源输出至 static/ 并重写 CSS 中 url()；需通过配置 name 为 'assets/[name].[hash:8].[ext]' 或改用 public/ 目录加绝对路径解决。
Webpack 打包后 background-image 路径变成 static/img/xxx.png 但实际文件在 assets/ 下
这是因为 Webpack 默认把 url() 中的资源路径交给 file-loader 或 url-loader 处理，并按配置输出到 static/（或 dist/assets/）目录，同时重写 CSS 里的 url() 值。但如果你的原始图片放在 src/assets/，而 CSS 文件在 src/css/，相对路径写的是 url("../assets/xxx.png")，打包后 loader 可能直接“接管”并替换成哈希路径，却没同步更新引用层级，导致最终请求 404。
关键不是“路径写错了”，而是构建流程中路径重写与 public 目录映射不一致。
- 检查
vue.config.js（Vue CLI）或webpack.config.js中output.publicPath是否设为'/'（部署在根路径）或'./'（子路径部署）；设成'/'时，url("../assets/xxx.png")会被解析为/assets/xxx.png，但实际资源可能被复制到了/static/img/xxx.abcd123.png - 确保
css-loader的url选项开启（默认开启），且file-loader的name配置与你期望的发布结构匹配，例如：name: 'img/[name].[hash:8].[ext]' - 更稳妥的做法：把图片放进
public/目录（如public/assets/bg.png），然后在 CSS 中写绝对路径url("/assets/bg.png")—— 这类资源不走 webpack 构建，路径不会被重写，也不受publicPath影响
Vite 构建后 background-image 请求 404，但本地开发正常
Vite 对 public/ 目录和源码内路径的处理逻辑不同。开发时所有路径由 dev server 自动解析；构建后，url() 中的相对路径仍以 CSS 文件位置为基准，但若你没配好 base，浏览器发出的请求就会错位。
比如 CSS 在 assets/style.css，图片在 assets/bg.png，你写了 url("bg.png")，本地能通，是因为 Vite dev server 做了路径代理；但构建后，CSS 被打进 assets/style.123.css，而图片被打进 assets/bg.456.png，此时 url("bg.png") 就变成请求同级的 bg.png（无哈希），自然 404。
立即学习“前端免费学习笔记（深入）”；
- 统一用
public/存静态资源：图片放public/images/bg.png，CSS 写url("/images/bg.png")（开头必须有/） - 确认
vite.config.ts中base设置匹配部署路径：部署在根目录用base: '/'；部署在子路径如/my-app/，则必须设base: '/my-app/'，否则/images/bg.png会请求成https://example.com/images/bg.png而不是https://example.com/my-app/images/bg.png - 避免在 CSS 中写
url("./bg.png")或url("bg.png")—— Vite 不会重写这类相对路径，构建后它们仍按字面意思解析，极易出错
background-image 显示了但路径是 /static/img/xxx.png，而我需要保持原 assets/ 结构
这是 Webpack 默认行为：它把所有模块资源（包括 CSS 里 url() 引用的图片）归入一个统一输出目录（如 static/img/），并重写 CSS 中的路径。你无法靠改 CSS 里的字符串绕过，得从 loader 配置入手。
核心思路是让 loader “别动”你的路径，或者让它生成的路径符合你预设的目录结构。
- 在
vue.config.js中配置chainWebpack，对url-loader或file-loader的name选项设为'assets/[name].[hash:8].[ext]'，这样输出就落在dist/assets/下 - 如果使用
css-loader+file-loader组合，确保css-loader的url选项为true，且file-loader的context指向src/，避免路径计算偏移 - 更简单粗暴的解法：不用
url()引用模块，改用public/+ 绝对路径，彻底避开构建时路径重写逻辑
开发者工具里看到 background-image 请求返回 200，但图还是不显示
这说明路径没问题，问题出在 CSS 层或渲染层。最常见的是三类干扰：
-
background简写覆盖了background-image：比如先写了background-image: url(...)，后面又写了background: #fff，后者会把background-image、background-repeat全部重置为默认值（none和repeat），导致图片消失。用开发者工具看该属性是否被划掉（strikethrough） - 容器没有尺寸：
background-image不会像<img>那样撑开父元素。如果元素height: 0或display: none，背景图天然不可见。检查 computed 样式中的height和display -
background-size或background-position导致图被裁剪或偏移出视口：比如设了background-size: cover但图片比例极端，或background-position: 100% 100%把图“推”到右下角外。临时加background-color: red看容器是否真存在
真正容易被忽略的是：打包工具对 CSS 的压缩和简写合并可能静默丢弃某些声明，尤其是当多个 background 规则混用时。调试时优先拆开写 background-image、background-repeat、background-size，而不是依赖一行 background。
