Nuxt3使用vite-svg-loader出现默认导出缺失语法Error求助

问题分析 #

你的SVG图标能正常渲染，但浏览器抛出Uncaught SyntaxError: The requested module ... does not provide an export named 'default'，核心原因是Nuxt的自动组件注册机制误将icons/index.ts当作Vue组件处理——Nuxt默认会扫描components目录下的文件并自动注册为组件，而组件要求有default导出，但你的index.ts只有命名导出，因此触发错误。

解决方案 #

方案1：排除icons目录的自动组件注册 #

在nuxt.config.ts中配置，让Nuxt自动组件注册跳过icons文件夹：

export default defineNuxtConfig({
  components: {
    exclude: ['~/components/GlobalIcon/icons/**/*'],
  },
})

方案2：精准指定组件目录的文件类型 #

如果需要更精细的控制，可以明确告诉Nuxt只注册vue后缀的文件：

export default defineNuxtConfig({
  components: {
    dirs: [
      { 
        path: '~/components/GlobalIcon', 
        extensions: ['vue'] // 仅处理.vue文件，忽略ts/svg等
      },
      '~/components' // 保留其他组件目录的默认行为
    ],
  },
})

额外优化：简化vite-svg-loader配置 #

可以在nuxt.config.ts中设置vite-svg-loader默认使用raw模式，这样导入SVG时无需加?raw后缀：

import svgLoader from 'vite-svg-loader';

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader({
        defaultImport: 'raw',
      }),
    ],
  },
})

之后icons/index.ts可以简化为：

import angleDown from './angle-down.svg';
import angleLeft from './angle-left.svg';
export { angleDown, angleLeft };

验证 #

修改配置后重启Nuxt服务，浏览器的default导出错误会消失，图标仍能正常渲染。

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