Vite设置base为'./'构建时CSS文件内资源路径错误如何修复

问题复现条件 #

• 纯原生JavaScript搭建的Vite项目，所有开发文件统一存放于src目录
• 自定义rollupOptions按文件类型分类输出构建产物到dist下的不同子目录
• vite.config.js中base配置为相对路径'./'或空字符串时，CSS文件内引用的图片、字体等资源路径层级错误，HTML文件内资源路径正常
• base配置为绝对路径（如/somename/）时，所有文件资源路径解析正常

核心原因 #

当base为相对路径时，Vite会根据构建产物的实际存放位置，自动计算CSS文件内部资源引用的相对跳转层级。如果将CSS文件的输出规则混在通用静态资源的assetFileNames回调中处理，Vite无法正确识别CSS文件的实际输出目录，默认判定CSS文件存放在assets根目录，不会计算assets/css/子目录到其他资源目录的../层级，最终生成错误路径。
当base为绝对路径时，所有资源从域名根路径开始寻址，不需要计算文件间的相对层级，因此不会触发该问题。

修复步骤 #

• 显式声明静态资源根目录，在build配置中添加assetsDir: 'assets'，和rollup输出的资源根目录对齐
• 从assetFileNames的通用处理逻辑中剥离CSS文件的输出规则，使用rollup专门提供的cssFileNames配置项指定CSS输出路径，让Vite可以准确识别CSS文件的存放位置

修正后的完整配置示例：

import { defineConfig } from 'vite'

export default defineConfig({
  base: './', // 配置为空字符串''同样生效
  build: {
    assetsDir: 'assets', // 显式声明静态资源根输出目录
    rollupOptions: {
      output: {
        // 单独指定CSS输出路径，不混入通用asset处理逻辑
        cssFileNames: 'assets/css/[name]-[hash].css',
        assetFileNames: (assetInfo) => {
          // 跳过CSS文件，已由cssFileNames处理
          if (assetInfo.name?.endsWith('.css')) return
          const ext = assetInfo.name.split('.').pop()
          let extType = ext
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(ext)) {
            extType = 'img'
          }
          if (/woff|woff2|ttf|otf|eot/i.test(ext)) {
            extType = 'fonts'
          }
          return `assets/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
      },
    },
  },
})

验证结果 #

重新执行构建命令后，dist目录下的CSS文件中资源引用会自动补全正确的相对层级，例如背景图路径会生成../img/bg-xxxxxx.png格式，和HTML文件的资源引用一样可以正常加载。

内容的提问来源于stack exchange，提问作者carrrramba