Vue3+Vite项目使用vite-svg-loader加载SVG组件失败求助

以下是几个排查和解决的关键点：

• 检查vite-svg-loader的配置
  确保你已经在vite.config.js中正确配置了该loader，未配置的话Vite无法识别?component后缀的导入规则：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import svgLoader from 'vite-svg-loader'
  
  export default defineConfig({
    plugins: [vue(), svgLoader()]
  })
  

• 验证SVG文件路径
  确认../assets/svg/google.svg这个相对路径是正确的，检查文件是否存在、文件名/路径的大小写是否和实际文件一致（部分系统如Linux区分大小写）。

• 排查组件注册与模板拼写
  再次确认：

  1. 组件注册的键ProgressPin1和模板中使用的<ProgressPin1/>拼写完全一致；
  2. 若你的组件使用<script setup>语法，无需在components对象中注册，直接导入后即可在模板使用（当前你用的是选项式API，此条可忽略）。

• 清除Vite缓存
  缓存可能导致解析异常，尝试删除项目根目录下的node_modules/.vite文件夹，然后重启开发服务器。

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