如何将defineAsyncComponent与Vite和Vue组件一起使用：是？

Question

有人可以向我解释一下如何将

defineAsyncComponent

与 vite 组件一起使用吗？我正在从 vue-cli 迁移到 Vite，并且遇到了一个问题，即通过

defineAsyncComponent

导入的组件未在布局中渲染

例如，这是我的代码：

<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 中 import() 的结果是带有默认 getter 的 esmodule，但在 Vite 中，它是带有默认属性的对象

为了让它发挥作用，我这样做了，但我觉得我做错了什么。

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

"vue": "^3.3.4", "@heroicons/vue": "^1.0.6", "vite": "^5.2.12",

Answer 1

defineAsyncComponent

支持返回组件 Promise 的函数和模块对象 Promise 作为参数，但仅适用于 ES 模块。

该问题是特定于软件包的。

@heroicons/[email protected]

为每个组件提供CommonJS模块，就像

@heroicons/vue/solid/StarIcon

一样。它们可以通过模块互操作作为

default

ESM 导入导入，但可能无法满足

defineAsyncComponent

中的要求，因为这取决于捆绑器实现它的方式。

所以

(await import("@heroicons/vue/solid/StarIcon")).default

是一种适用于 CJS 和 ES 模块的解决方法，通常可以推荐。