Vue3+Vite动态引入资源报错'default' is not exported by xxx解决方法

问题场景 #

迁移、构建Vue3+Vite项目时，常会遇到如下报错：

'default' is not exported by XXX

该问题通常出现在参考官方静态资源指引写动态资源引入的场景下，初始引入写法一般为：

new URL(`/src/${path}`, import.meta.url).href;

其中path为静态资源相对路径，例：assets/icons/xxx.svg。

报错原因 #

当new URL()的基础路径直接指向src目录时，Vite会尝试解析该目录下所有匹配到的文件，包括.vue、.ts等代码类文件，最终触发上述导出错误。

解决方法 #

调整URL解析的基础路径，明确补充assets目录层级，将引入写法修改为：

new URL(`/src/assets/${path}`, import.meta.url).href;

修改后即可修复该报错。

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