为什么本地引入的CSS在打包部署后背景图路径失效？-css教程-PHP中文网

根本原因是CSS中url()的相对路径以CSS文件实际位置为基准，开发时服务器模拟根路径掩盖问题，构建后CSS与图片目录分离导致路径解析错误。

为什么本地引入的css在打包部署后背景图路径失效？

本地开发能显示、打包后背景图全 404，根本不是图片丢了，而是浏览器按 css 文件最终所在位置去解析 url() 里的相对路径——而构建工具把 CSS 和图片分开放了，路径基准一变，../img/bg.png 就指向了错误目录。

为什么开发正常、上线就 404？

CSS 中的 url() 路径永远以 CSS 文件自身位置为基准，不是 HTML 页面，也不是源码结构。开发时 Vite/Webpack dev server 会模拟“所有资源都在根下”，掩盖了路径问题；但构建后，CSS 可能被抽到 /css/app.css，图片却在 /assets/img/bg.png，而你写的 url(../assets/img/bg.png) 就会被解析成 /css/../assets/img/bg.png → /assets/img/bg.png ——这看似对，可一旦部署在子路径（如 /my-app/）或 CDN 域名下，实际请求地址就变成 https://example.com/assets/img/bg.png，而真实资源其实在 https://example.com/my-app/assets/img/bg.png。

Chrome DevTools 的 Computed 面板里点开 background-image，能看到浏览器最终拼出的完整 URL，直接复制粘贴进地址栏验证是否真能访问
Network 面板里看到请求是 404 且路径明显少了一级（比如缺 my-app/），基本就是 publicPath 或部署路径没对齐
如果路径显示为 file:///，说明你在本地双击 HTML 打开，没走 HTTP 服务，部分相对路径会被浏览器拦截

用 `public/` 目录 + 绝对路径最稳

适合 logo、banner、favicon 这类不需哈希、不常变动的资源。构建工具完全不处理 public/ 下的文件，路径绝对可控。

把图片放进 public/assets/bg.png
CSS 或 SCSS 中写 background-image: url('/assets/bg.png');（开头必须有 /）
确认 vite.config.ts 中 base 配置匹配部署路径：比如部署在 /my-app/，就要设 base: '/my-app/'，否则最终 URL 会漏前缀
Vue CLI 项目同理，确保 process.env.PUBLIC_URL 注入正确，并在 CSS 中统一用 url('/assets/bg.png')

需要哈希或动态切换？改用 JS 导入

url() 是纯字符串，构建工具默认不解析它里面的路径；只有 JS 层面的 import 才能触发哈希、压缩、路径重写等处理。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

在组件中写 import bg from '@/assets/bg.png'
Vue 模板里：
React 里：
全局 mixin 或 SCSS @mixin 里不能 import？那就把已 import 的变量作为参数传进去


别踩这些“看似能跑”的坑
很多写法本地能过，上线立刻挂，因为它们依赖未声明的构建行为或环境假设。


url(./assets/bg.png)：构建后 CSS 被抽离，. 基准变成 dist/css/，不再是源码结构

url('~@/assets/bg.png')：Webpack 旧版 hack，Vite 不支持，Vue CLI 5+ 已弃用

background: url('/my-app/src/assets/bg.png')：源码路径在构建后根本不存在，纯属幻想
用 http:// 或 // 开头的路径：url(https://cdn.example.com/logo.png) 构建工具完全不接管，哈希、压缩、路径重写全失效

真正麻烦的从来不是写法本身，而是路径基准和构建输出结构之间的错位——只要没盯住 CSS 文件最终落哪儿、图片最终放哪儿、浏览器按谁算 ../，就一定会在某个部署环境里突然失效。