Vite开发SVG转Vue2.7组件插件时load钩子无法捕获SVG如何解决

Vite内置静态资源处理逻辑默认优先接管.svg类资源文件，你的插件未指定执行优先级，运行顺序晚于内置静态资源处理逻辑，SVG文件在进入你的load钩子前就已经被判定为静态资源，走资源重命名、复制到assets目录的流程了。

1. 给插件添加enforce: 'pre'配置 #

Vite插件执行分为pre、normal、post三个阶段，内置静态资源处理运行在normal阶段，将插件设为pre阶段即可在内置逻辑前拦截到SVG请求。

2. 在load钩子中主动匹配、接管SVG文件 #

传入load钩子的id可能携带?import、?raw等查询参数，判断文件后缀前需要先剔除query、hash部分，匹配到.svg文件后直接返回转换后的组件代码即可，返回非null值时Vite会终止后续其他处理逻辑，不会再把文件当静态资源处理。

修改后的插件基础代码：

// 清理路径中的query、hash后缀
function getRealPath(id) {
  return id.split('?')[0].split('#')[0]
}

function svgLoader() {
  return {
    name: "svg-loader",
    enforce: "pre", // 核心配置：提升插件执行优先级
    load(id) {
      const realPath = getRealPath(id)
      if (!realPath.endsWith('.svg')) {
        return null // 非SVG文件交还给后续逻辑处理
      }

      // 此处编写SVG转Vue2.7组件的逻辑
      // 最小实现参考：读取SVG文件内容，包装为Vue组件配置返回
      // const svgRaw = fs.readFileSync(realPath, 'utf-8')
      // return `
      // import Vue from 'vue'
      // export default Vue.extend({
      //   render(h) {
      //     return h('i', { domProps: { innerHTML: ${JSON.stringify(svgRaw)} } })
      //   }
      // })
      // `
    }
  }
}

多插件冲突场景补充配置 #

如果项目存在其他也处理SVG的插件，上述配置仍不生效时，可在Vite配置中把SVG从默认静态资源识别规则中移除，彻底关闭Vite对SVG的默认静态资源处理：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import svgLoader from './path/to/your/svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()],
  assetsInclude(ext) {
    // 排除svg后缀，不纳入默认静态资源处理
    return ext !== 'svg'
  }
})

注意：如果配置了全局排除SVG静态资源处理，又需要保留部分SVG作为静态资源导入的能力，可以给作为组件导入的SVG加专属query标记（例如导入路径写@/path/icon.svg?component），在load钩子中只匹配携带该query的SVG文件做组件转换，其余SVG返回null交由静态资源逻辑处理即可。

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