Vite项目构建后CSS中url()引用图片出现404问题求助

问题根源 #

Vite对HTML与CSS/SCSS中资源引用的解析逻辑存在差异：

• HTML里的img src路径会被Vite在构建时自动修正，适配最终的资源结构；
• 但CSS/SCSS中的url()引用，是基于当前样式文件的位置解析相对路径的。你使用的多级回退（回退3级）路径，在开发环境因dev server的实时解析能正常工作，但构建后样式文件的输出位置改变，相对路径基准点偏移，导致资源找不到，抛出404。

解决方案 #

1. 配置路径别名（推荐）

通过Vite的路径别名统一资源引用路径，避免多级回退的混乱：
修改vite.config.js添加别名配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, './src/assets') // 替换为你实际的资源根目录
    }
  },
  build: {
    minify: false,
    logLevel: 'info'
  }
})

之后在SCSS中用别名引用图片：

background-image: url('@assets/images/[你的图片文件名].png');

2. 使用根路径引用

直接使用以/开头的根路径，基于项目根目录定位资源（需确保Vite的base配置为默认的/）：

background-image: url('/src/assets/images/[你的图片文件名].png');

如果图片放在public目录下，可直接简化为：

background-image: url('/images/[你的图片文件名].png');

（注：public目录下的资源会被原封不动打包到dist根目录，无需在路径中包含public）

3. 确认构建资源输出配置

可通过build.assetsDir指定资源打包目录，确保路径匹配：

export default defineConfig({
  build: {
    minify: false,
    logLevel: 'info',
    assetsDir: 'assets' // 资源会输出到dist/assets下，默认值即为assets，可按需调整
  }
})

内容的提问来源于stack exchange，提问作者Luis Alejandro López de Anda