Vite 5.0.4：如何避免CSS中SVG被转为Base64内联（非assetsInlineLimit=0方案）

以下是无需将assetsInlineLimit设为0的可行方案：

方案1：通过JS引入SVG并注入CSS变量 #

在组件或入口文件中用?url引入SVG资源，再通过CSS变量传递到样式中：

// 引入SVG资源，?url参数会返回资源的打包后URL
import bgSvgUrl from '@assets/file.svg?url';
// 将URL注入到全局CSS变量
document.documentElement.style.setProperty('--bg-svg-url', `url(${bgSvgUrl})`);

然后在CSS中使用该变量：

.target-element {
  background-image: var(--bg-svg-url);
}

这种方式下，JS引入的?url参数会正常生效，资源会被打包为独立文件而非内联Base64。

方案2：配置Rollup输出规则强制SVG作为独立资源 #

在vite.config.js中通过Rollup的输出配置，强制所有SVG文件生成独立资源，不受assetsInlineLimit阈值影响：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 自定义资源文件名规则，确保SVG生成独立文件
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.svg')) {
            return 'assets/svg/[name].[hash][extname]';
          }
          return 'assets/[name].[hash][extname]';
        },
        // 禁止动态导入内联，确保SVG资源被单独打包
        inlineDynamicImports: false,
      },
    },
    // 保持原有的assetsInlineLimit阈值，仅SVG例外
    assetsInlineLimit: 4096,
  },
});

配置后，CSS中通过url("@assets/file.svg")引入的SVG会自动作为独立资源输出，无需额外加?url参数。

方案3：将SVG放入public目录直接引用 #

把需要作为背景的SVG文件放到项目根目录的public文件夹下，然后在CSS中直接使用绝对路径引用：

.target-element {
  background-image: url('/file.svg');
}

Vite会直接将public目录下的文件复制到打包后的根目录，不会进行Base64内联处理。

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