如何在Vite中将图片、SVG与JS、CSS打包为单个文件？

你遇到的核心问题是Vite默认会将SVG作为独立资源文件输出，即便配置了@rollup/plugin-image，Vite内置的资源处理逻辑优先级更高，导致SVG仍被单独打包。以下是三种可行的解决方法：

方法1：调整Vite资源嵌入阈值 #

Vite的assetsInlineLimit参数默认会将小于4KB的资源转为Base64嵌入JS，你可以将其设为无限大，强制所有SVG嵌入bundle：

修改vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        // 保持你已有的JS/CSS合并配置
        entryFileNames: 'bundle.js',
        chunkFileNames: 'bundle.js',
        assetFileNames: 'bundle.js'
      }
    },
    assetsInlineLimit: Infinity // 所有资源均嵌入JS文件
  }
})

⚠️ 注意：若SVG体积过大，会导致bundle.js臃肿，影响页面加载速度，按需使用。

方法2：让@rollup/plugin-image接管SVG处理 #

需要先禁用Vite对SVG的默认处理，再让Rollup插件接管：

修改vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import image from '@rollup/plugin-image'

export default defineConfig({
  plugins: [
    react(),
    image({ include: '**/*.svg' })
  ],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'bundle.js',
        chunkFileNames: 'bundle.js',
        assetFileNames: 'bundle.js'
      },
      plugins: [image({ include: '**/*.svg' })],
      external: () => false
    },
    assetsDir: '' // 禁用Vite默认资源目录
  }
})

组件中正确导入SVG（此时导入的是Base64字符串）：

import image1Base64 from './image1.svg'

function App() {
  return <img src={image1Base64} alt="示例SVG" />
}

方法3：将SVG转为React组件嵌入（React项目专属） #

通过插件将SVG转成React组件，直接作为代码的一部分打包进JS：

先安装依赖：

npm install vite-plugin-svgr --save-dev

修改vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: { icon: true } // 可选：将SVG处理为图标组件
    })
  ],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'bundle.js',
        chunkFileNames: 'bundle.js',
        assetFileNames: 'bundle.js'
      }
    }
  }
})

组件中导入并使用SVG组件：

import { ReactComponent as Image1 } from './image1.svg'

function App() {
  return <Image1 width={100} height={100} />
}

这种方式下，SVG的代码会直接合并到JS bundle中，不会生成独立文件。

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