生产环境背景图片404是因构建后路径解析与部署路径不匹配；开发时Vite dev server映射路径正常，构建后CSS中url()未被重写或使用根相对路径导致浏览器请求错误位置。
生产环境背景图片 404，基本就是构建后路径解析和部署路径不匹配——不是图片丢了，是浏览器找错了地方。
为什么开发正常、上线就 404
CSS 里的 url() 路径在构建时会被重写，但前提是它被识别为模块依赖。如果写的是 url(/assets/logo.png) 这种根相对路径，Webpack/Vite 默认不会处理它；而写 url(../assets/logo.png) 又依赖 CSS 文件位置，一旦提取 CSS 到 /static/css/，上层目录就变了。
- 开发时：Vite 的 dev server 把
src/assets/映射到http://localhost:3000/src/assets/，路径能通 - 构建后：图片被打包进
/assets/logo.abc123.png，但 CSS 里还写着旧路径，或压根没参与哈希 - 部署时：Nginx 把请求代理到
/my-app/子路径，但url(/assets/...)还是往根下找
用 public/ + 绝对路径最省心
适合 favicon、logo、banner 等全局静态资源，不参与构建、不加 hash，路径可控。
- 把图片移到
public/assets/logo.png - CSS 中写
url(/assets/logo.png)（注意开头的/） - Vite 项目确认
vite.config.ts里base和publicDir配置一致：base: '/my-app/'→ 图片 URL 就是https://example.com/my-app/assets/logo.png - Vue CLI 同理，确保
process.env.PUBLIC_URL在 HTML 模板中注入，并在 CSS 中用url(/assets/logo.png)（需配置 html-webpack-plugin）
需要哈希和压缩？走 JS 动态导入
当图片必须参与构建（比如组件级小图标），就不能靠 CSS 里的 url() 直接引用了。
- Vue：在
<script setup></script>中import logo from '@/assets/logo.png'，然后绑定:style="{ backgroundImage: `url(${logo})` }" - React：同理
import logo from './logo.png'，再用style={{ backgroundImage: `url(${logo})` }} - 纯 HTML/CSS 项目？改用
+ JS 注入 style 标签，避免 CSS 提取导致路径错位
别踩这些坑
很多“看似能跑”的写法，上线就挂：
-
url(./assets/logo.png)—— 构建后 CSS 被抽离，.基准变成 CSS 文件所在目录，不再是源码结构 -
url('~@assets/logo.png')—— Webpack 需要css-loader+resolve.alias，且 Vite 不支持这种写法 -
url(https://cdn.example.com/logo.png)—— 构建工具完全不处理，CDN 路径变更或权限问题直接 403 - 在
index.html里用写背景图 —— 容易漏掉构建时的路径重写逻辑，尤其用了 MiniCssExtractPlugin
真正麻烦的从来不是怎么写，而是不同构建阶段（dev / build / deploy）之间路径上下文的断裂。盯住 Network 面板里实际发出的请求地址，比猜路径靠谱十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
