vue3使用import动态加载svg报错解决方案

我有如下代码：

当前出问题的截图

现在会发现报错：

报错截图
实现的目的：
根据父级传递进来的chart图表名称，来动态加载本地的svg图表。

但是我发现如果在import中直接使用模板字符串，那么就会报错：RecommendChatPanel.vue:42 Uncaught (in promise) TypeError: Failed to resolve module specifier

所以之后调整了一下如图：

正确执行

如图可以正常执行。

判断到应该还是import加载组件时机的问题，而修改后的方法，使用了import.meta,global方法去预先取出所有符合条件的组件值，接着去调用并使用defineAsyncComponent来动态加载就可以了。

image.png

哦对，vite项目中使用动态加载svg记得引入vite-svg-loader插件，并在vite.config.js中进行配置:

image.png