Vite.js 2.9搭配Vue.js 2.7如何将SVG作为组件模块导入？

vite-svg-loader 4.0及以上版本确实移除了Vue2支持，不需要替换现有SVG文件为.vue组件，也不需要改动业务代码里的导入写法，以下两个方案都可以直接对齐原有vue-svg-loader的使用习惯：

方案1：使用兼容Vue2.7的vite-svg-loader历史版本 #

vite-svg-loader 3.x分支全版本原生兼容Vue2.7，是迁移成本最低的选择：

• 安装对应版本依赖

npm install vite-svg-loader@3.6.0 -D

• 在vite.config.js中完成配置，避免和Vite默认的SVG静态资源处理规则冲突

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
    vue2(),
    svgLoader({
      svgo: true, // 保持和vue-svg-loader一致的SVG压缩能力
      defaultImport: 'component' // 默认将.svg导入解析为Vue组件，无需额外加后缀
    })
  ]
})

配置完成后，原有代码里的SVG导入、注册、组件使用逻辑完全不需要修改，和Vue CLI下的表现一致。

方案2：使用Vue2专属的SVG组件加载插件 #

如果不想使用旧版本依赖，可以选择专门为Vue2/Vue2.7适配的vite-plugin-vue2-svg：

• 安装依赖

npm install vite-plugin-vue2-svg -D

• 在vite.config.js中配置

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import { createSvgPlugin } from 'vite-plugin-vue2-svg'

export default defineConfig({
  plugins: [
    vue2(),
    createSvgPlugin({
      svgo: true // 按需配置SVG压缩、自定义类名等规则
    })
  ]
})

该插件默认将.svg文件解析为Vue组件，同样不需要改动现有业务代码。

混合使用说明 #

如果项目中同时存在「SVG作为组件使用」和「SVG作为静态资源URL使用」的场景，不需要全局覆盖SVG的解析规则，只需要将插件的默认导入模式调整为url，在作为组件导入的文件路径后追加?component后缀即可，两种用法可以共存：

// 作为组件导入
import MyIcon from "@/assets/icons/my-icon.svg?component"
// 作为静态资源路径导入
import iconSrc from "@/assets/images/bg.svg"

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