Vite中使用vite-svg-loader导入SVG时导入语句被自动删除求助

问题原因 #

WebStorm内置的代码检查无法识别<script setup>语法中导入的组件在模板中的使用，尤其是带?component查询参数的SVG文件导入，因此误判为未使用导入并自动移除。

解决方案 #

方案1：添加TypeScript类型声明 #

在项目的src目录下创建或编辑vite-env.d.ts文件，添加以下类型声明，让TypeScript和WebStorm识别?component后缀的SVG文件为Vue组件：

declare module '*.svg?component' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

方案2：调整WebStorm代码检查规则 #

1. 打开WebStorm设置（快捷键Ctrl+Alt+S）
2. 进入Editor → Inspections → TypeScript → Unused import
3. 点击右侧的「Configure inspections scope」按钮
4. 添加排除规则，匹配*.svg?component格式的导入，或直接针对SVG文件禁用该检查
5. 保存设置后，WebStorm将不再自动删除这类导入语句

方案3：使用注释跳过检查 #

在导入语句上方添加专属注释，强制WebStorm忽略该导入的未使用检查：

<script lang="ts" setup>
// noinspection ES6UnusedImports
import IconNavMain from "./assets/vue.svg?component"
</script>

验证配置 #

确认你的Vite配置已正确引入vite-svg-loader：

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

export default defineConfig({
    base: "./",
    plugins: [vue(), svgLoader()]
})

组件使用示例：

<template>
  <IconNavMain/>
</template>

<script lang="ts" setup>
import IconNavMain from "./assets/vue.svg?component"
</script>

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