为什么在使用NUXT3时不使用动态导入

Question

我正在尝试创建一个组件，该组件可以让我通过我要寻找的图标的名称和通过unplugin-icons动态导入该图标的名称，只要导入的路径是动态的，它似乎都无法正常工作。如果我只是键入一个字符串，则可以正常工作。有什么建议吗？我正在使用NUXT 3和VITE。

interface Icon {
    name: string;
}
const props = defineProps<Icon>();

const sun = "sun";
const icon = await import(`~icons/fa-solid/${sun}`);
const PropIcon = defineComponent(icon.default);

以下是我收到的错误，

 const props = __props;
12 |      const sun = "sun";
13 |      const icon = ([__temp, __restore] = _withAsyncContext(() => import(`~icons/fa-solid/${sun}`)), __temp = await __temp, __restore(), __temp);
   |                                                                         ^
14 |      const PropIcon = defineComponent(icon.default);
15 |      const __returned__ = { props, sun, icon, PropIcon };
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

我试图使用 / * vite忽略 * /，但下面没有使用

的是硬编码版本，

interface Icon {
    name: string;
}
const props = defineProps<Icon>();

const sun = "sun";
const icon = await import(`~icons/fa-solid/sun`);
const PropIcon = defineComponent(icon.default);

下面是标准导入

import IconSun from "~icons/fa-solid/sun";

Answer 1

vite已经给您答案，只需阅读它：

如果打算将其按原样保留，则可以使用 /* @vite-ignore
*/在import（）呼叫中注释以抑制此警告。

Vite无法分析导入模块，因为它不知道sun的值，

如果这是您的意图，则需要拒绝此错误：

const icon = await import( /* @vite-ignore */` ~icons/fa-solid/${sun}`);