根本原因是css中url()以自身文件位置为基准解析，vite构建后移动css却未重写其内部相对路径；需用import动态引入或public目录绝对路径解决。
根本原因不是 Vite 搞错了路径，而是 CSS 里的 url() 从不“知道”自己会被打包到哪——它只认自己文件所在位置，而 Vite 构建时把 CSS 文件挪了地方，却没动里面的 url(../img/logo.png)。
为什么开发能跑，打包就 404
CSS 中的 url() 是纯静态路径解析：以该 CSS 文件自身磁盘位置为起点，向上/向下找资源。开发时 src/css/style.css 和 src/img/logo.png 在同一项目结构里，url(../img/logo.png) 能命中；但构建后，Vite 把 CSS 提取成 dist/assets/style.xxxx.css，图片可能被复制到 dist/img/logo.png 或 dist/assets/logo.xxxx.png，此时 ../img/ 就指向了 dist/assets/../img/ —— 根本不存在。
- 这个行为与 HTML 中
<link href>的路径无关，也和vite.config.ts里的base配置无关（base只改<script></script>和<link>的前缀） - Vite 默认不会重写第三方 CSS（如 Bootstrap、Viewer.js）里的
url()，除非你用import让它走完整处理链 - SCSS/Less 编译器本身不参与路径重写，Vite 的 CSS 插件也不会主动修正预处理器输出里的相对路径
怎么让 CSS 里的 url() 路径在打包后还能对
核心原则：让 Vite “看见”并接管那个资源路径。只有两种可靠方式：
-
用
import替代url()：在 JS 或 Vue SFC 中import logoUrl from '@/assets/logo.png'，再通过内联样式或 CSS-in-JS 使用 —— Vite 会自动哈希、复制、返回正确路径 -
放
public/目录 + 绝对路径：把图片扔进public/img/logo.png，CSS 里写url(/img/logo.png)—— 这个路径绕过构建系统，直接映射到部署后的根路径，但失去哈希和自动校验 - 别写
url(./logo.png)或url(../assets/logo.png)：这类路径在构建后完全不可控，Vite 不校验也不重写，出问题只能手动修
第三方库 CSS 路径错乱怎么办
像 bootstrap.min.css 或 viewer.css 这类来自 node_modules 的 CSS，里面大量 url(../fonts/...)，默认是“裸拷贝”进 dist，路径必然断掉。
- 必须在 JS 入口顶部
import 'bootstrap/dist/css/bootstrap.min.css'—— 这样 Vite 才会扫描、重写其中的url()，并把字体等依赖复制进dist - 如果用了 pnpm，可能因硬链接隔离导致路径不可达，加
shamefully-hoist=true到.npmrc可缓解 - 别在
vite.config.ts里瞎配css.preprocessorOptions：它只影响 SCSS/Less 语法解析，对已编译好的 CSS 文件无效
容易被忽略的关键点
很多人试了 base: './' 或 base: '/subpath/'，发现 CSS 里背景图还是 404 —— 因为 base 真的只管 HTML 里生成的 <link href> 和 <script src></script>，对 CSS 内部的 url() 完全没作用。真正要修的，是让 Vite 能“介入”那个路径：要么用 import，要么塞进 public/，没有第三条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
