Vue+Vite生产环境img引用SVG时src显示[object Object]问题

这个异常确实是vite-svg-loader导致的。
该插件默认会全局接管项目中所有.svg后缀文件的解析逻辑：无论你是用import语法将svg导入为组件，还是直接在<img>标签的src属性里写svg路径，插件都会把svg文件解析为Vue组件对象。生产构建时Vite处理静态资源路径，会直接把解析得到的组件对象赋值给src属性，最终渲染出来的属性值就成了*[object Object]*。开发环境因为Vite用了不同的资源处理中间件逻辑，所以不会暴露这个问题。

• 方案1：调整插件默认解析规则，区分组件导入和资源导入
  修改vite.config配置文件中的vite-svg-loader参数，把默认导入行为改成返回静态资源url，仅当显式带查询参数时才解析为Vue组件：

  // vite.config.js/ts
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import svgLoader from 'vite-svg-loader'
  
  export default defineConfig({
    plugins: [
      vue(),
      svgLoader({
        defaultImport: 'url' // 默认将svg作为静态资源url返回
      })
    ]
  })
  

  配置完成后，需要作为组件使用的svg，导入时手动加?component后缀即可：

  import MainBannerSvg from '@/assets/images/bg/main-banner.svg?component'
  

• 方案2：给img标签使用的svg路径加强制资源查询参数
  如果你不想修改插件全局配置，可以直接在<img>的src路径末尾加?url参数，强制Vite将该文件作为静态资源路径处理，跳过插件的组件解析逻辑：

  <img class="..." src="/src/assets/images/bg/main-banner.svg?url" alt="Background">
  

• 方案3：将作为静态资源使用的svg移入public目录
  把不需要作为组件使用的svg文件放到项目根目录的public文件夹下，引用时直接写根路径，这部分资源不会经过Vite的构建解析流程，自然也不会被vite-svg-loader接管。比如把文件放到public/static/main-banner.svg，src属性直接写/static/main-banner.svg即可。

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