Nuxt3中使用vite-svg-loader动态加载SVG组件报错求助

问题原因 #

Vite的ES模块动态导入机制和Nuxt2使用的Webpack不同，它要求动态路径必须包含固定的前缀部分，不能完全动态拼接；同时Nuxt的别名~在动态import中需要被正确解析，vite-svg-loader的配置也得适配动态导入场景。另外你原代码里的watch回调存在语法错误，没执行importIcon函数。

解决方案 #

1. 修正动态导入的路径写法 #

把固定路径前缀从模板字符串中抽离，只动态替换文件名部分，让Vite能提前识别需要打包的文件范围，同时修正watch的调用方式：

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

const icon = ref(null)

async function importIcon() {
  try {
    // 固定路径前缀，仅动态替换文件名
    const module = await import(`~/assets/icons/${props.name}.svg`)
    icon.value = module.default // 注意取default导出的组件
  } catch (err) {
    const fallbackModule = await import('~/assets/icons/_blank.svg')
    icon.value = fallbackModule.default
  }
}

onMounted(async () => {
  await importIcon()
})

// 修正watch：调用importIcon函数要加括号
watch(() => props.name, async () => {
  await importIcon()
}, { immediate: true }) // 可选：添加immediate确保初始加载触发
</script>

<template>
  <component :is="icon" />
</template>

2. 确保vite-svg-loader配置正确 #

在nuxt.config.ts中配置插件时，要明确开启组件化支持，让SVG能被作为Vue组件导入：

export default defineNuxtConfig({
  vite: {
    plugins: [
      require('vite-svg-loader')({
        svgr: true,
        defaultImport: 'component' // 指定默认导入为组件
      })
    ]
  }
})

3. 备选方案：用import.meta.glob预导入所有图标 #

如果图标数量不多，可通过Vite的import.meta.glob批量预导入所有图标，彻底避开动态导入的路径解析问题：

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

// 预导入所有svg图标，eager设为true直接加载
const iconModules = import.meta.glob('~/assets/icons/*.svg', { eager: true })
// 提前加载兜底图标
const blankIcon = (await import('~/assets/icons/_blank.svg')).default

const icon = computed(() => {
  const targetPath = `~/assets/icons/${props.name}.svg`
  // 从预导入模块中匹配，无匹配则用兜底图标
  return iconModules[targetPath]?.default || blankIcon
})
</script>

<template>
  <component :is="icon" />
</template>

关键注意点 #

• Vite动态导入不支持完全动态的路径，必须保留固定前缀，否则构建时无法解析文件。
• 动态导入SVG后要取module.default，这是vite-svg-loader默认的组件导出方式。
• 原代码中watch回调里的await importIcon缺少括号，导致函数未执行，这也是props变化时图标不更新的原因之一。

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