Vue3升级时外部SVG被错误生成模块导入的问题求助

将Vue 2应用升级至Vue 3后，遇到SVG外部资源被错误编译为JS模块导入的问题，浏览器报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

在.vue文件中使用图标的方式为：

<svg alt="Apps">
  <use xlink:href="/img/icons/icons.svg#app" />
</svg>

编译后生成了额外的导入语句：import pe from "/img/icons/icons.svg";，尽管已在Vite配置中标记该文件为外部资源：

external: [            
  'icons.svg', 
  '/img/icons/icons.svg',
  'bootstrap'
],       

临时解决方案是将静态属性改为动态绑定：:xlink:href="'/img/icons/icons.svg#app'"，但希望通过配置让编译器将该路径视为普通字符串，避免修改代码。

1. 配置Vite排除特定资源处理 #

Vite的build.assets.exclude配置可以指定哪些文件不被当作可编译资源处理，而是保持原路径引用。在vite.config.ts中添加：

export default defineConfig({
  // ...现有配置
  build: {
    assets: {
      exclude: ['/img/icons/icons.svg']
    }
  },
  external: [            
    'icons.svg', 
    '/img/icons/icons.svg',
    'bootstrap'
  ],
})

2. 调整Vue模板编译的资源转换规则 #

通过@vitejs/plugin-vue的配置，修改模板中资源URL的转换逻辑，让特定SVG路径不被编译器识别为需要导入的资源：

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          // 移除'xlink:href'属性的资源转换规则，让该属性的路径保持原样
          svg: ['xmlns:xlink'],
          // 或者用自定义函数精准过滤目标路径
          transformAssetUrls: (url) => {
            if (url.startsWith('/img/icons/icons.svg')) {
              return url
            }
            return url
          }
        }
      }
    })
  ],
  // ...现有配置
})

为什么external配置不生效？ #

external仅针对import/require引入的模块依赖，而模板中静态属性的资源路径是由Vue模板编译器和Vite资源处理插件自动转换的，不属于模块导入范畴，因此无法阻止该转换行为。

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