Vite+Vue构建时如何将SVG内联至单JS文件，不生成assets文件夹？

要达成build后只生成单个JS文件、不产生assets文件夹的需求，直接调整Vite的构建配置就能实现，具体操作如下：

1. 编辑Vite配置文件（vite.config.js） #

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

export default defineConfig({
  plugins: [vue()],
  build: {
    // 关闭CSS代码分割，把CSS合并到JS里，避免生成单独的CSS文件
    cssCodeSplit: false,
    // 调大资源内联的阈值，确保所有SVG、GIF都能被内联（这里设为1MB，可根据你的资源大小调整）
    assetsInlineLimit: 1000 * 1000,
    rollupOptions: {
      output: {
        // 禁用自动代码分割，所有代码打包到同一个JS文件
        manualChunks: () => 'main',
        // 统一输出的JS文件名，确保最终只有一个main.js
        entryFileNames: 'main.js'
      }
    }
  }
})

2. 关键配置解释 #

• cssCodeSplit: false：默认Vite会把CSS单独打包成文件，开启这个配置后，CSS会被注入到JS里，运行时动态生成style标签，不会额外生成CSS文件。
• assetsInlineLimit：Vite默认只内联小于4KB的资源，调大这个值（比如1MB）能让所有SVG、GIF都被嵌入到JS里，不会生成assets文件夹。
• manualChunks: () => 'main'：关掉Rollup的自动分块功能，把所有模块都打包到一个JS文件里，避免出现多个chunk文件。

3. 验证结果 #

运行npm run build后，查看dist目录，只会有main.js这一个文件，原来的SVG、GIF资源都已经内联到这个JS文件里了，不会出现assets文件夹。

如果你的SVG特别大，超过了设置的阈值，就把assetsInlineLimit的值再调大些；要是项目里还有其他类型的资源（比如字体），也可以用同样的方式处理。

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