如何在Vite中结合Vue的:is指令使用defineAsyncComponent？

问题场景 #

从 Vue CLI 迁移到 Vite 后，使用 defineAsyncComponent 异步导入 Heroicons 组件时，动态组件 <component :is="icon.icon" /> 无法正常渲染。原代码如下：

<template>
  <component :is="icon.icon" />
</template>

<script setup>
import { computed, defineAsyncComponent } from "vue";

const ICONS = {
  star: {
    icon: defineAsyncComponent(() => import("@heroicons/vue/solid/StarIcon"));
  }
};
 
const icon = computed(() => ICONS.star);
</script>

问题根源 #

• Vue CLI 基于 webpack，处理 import() 时返回的模块带有默认 getter，可直接作为组件使用；
• Vite 严格遵循 ES 模块规范，import() 返回的是包含 default 属性的模块对象，直接传入 defineAsyncComponent 无法识别正确的组件出口。

你的解法：完全正确 #

你采用的修正写法是符合 Vite 模块处理逻辑的正确方案：

defineAsyncComponent(async () => (await import("@heroicons/vue/solid/StarIcon")).default);

通过 await import() 获取模块对象后，显式取出 default 属性作为组件返回，完美适配 Vite 的模块解析规则。

可选优化写法 #

如果偏好更简洁的链式调用风格，也可以这样写，效果完全一致：

defineAsyncComponent(() => import("@heroicons/vue/solid/StarIcon").then(module => module.default));

注意事项 #

• 该差异是构建工具对 ES 模块的处理方式不同导致的，与你当前使用的 Vue 3.3.4 版本无关；
• 所有第三方库的默认导出组件，在 Vite 中使用异步导入时，都需要显式获取 default 属性。

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