如何异步导入所有Vue3组件？

Question

我正在努力让组件发挥作用。我想在数组中包含组件名称，然后将组件作为异步导入，然后以某种方式将变量放入 app.component 中。我已经在这里尝试了大约 6 个小时，但我无法弄清楚。我不想每个组件都有 50x import和 50x app.component并且它不想为我工作我可能错过了一些明显的东西。不幸的是，我不太擅长 JS。

main.js

import { createApp, defineAsyncComponent } from "vue";

import App from "./App.vue";

import router from "./router";

var subComponents = new Array([

  "test", 

  "test2"

]);  

subComponents.forEach(subComponent => {

  subComponent = defineAsyncComponent(() =>

    import(`@/components/sub/${subComponent}.vue`)       

  )

});

const app = createApp(App);

app.use(router);

app.component(subComponent, subComponents);

app.mount("#app");

它报告这些问题

无法解析组件：测试

无法解析组件：test2

Answer 1

我认为您需要的是在循环内单独注册每个组件，如下所示：子组件.js：const subComponents = ['test', 'test2'];export { subComponents }main.js：import { createApp, defineAsyncComponent } from 'vue';import App from './App.vue';import router from './router';import { subComponents } from './subComponents';const app = createApp(App);subComponents.forEach(subComponent => {    const component = defineAsyncComponent(() => import(`@/components/sub/${subComponent}.vue`));    app.component(subComponent, component);});app.use(router);app.mount('#app');目前，您将一个不存在的subComponent变量作为第一个参数传递给单个实例，app.component并将数组作为第二个参数。app.component应用于单个组件，第一个参数是组件的名称，第二个参数是组件本身。因此，如果您循环遍历名称数组并使用该名称导入每个组件，然后使用该名称和导入的组件注册一个组件，它们将在您的整个应用程序中可用。