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

我正在努力使这些部件正常工作。我希望在数组中有组件名称，然后以异步方式导入组件，然后以某种方式将变量放入app.component。我在这里已经试了6个小时了，我想不出来。我不希望每个组件都有50x导入和50x应用程序组件，它不想对我起作用，我可能遗漏了一些明显的东西。不幸的是，我不太擅长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");

它报告这些问题

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

---

我认为您需要的是在循环中单独注册每个组件，如下所示：

subComponents.js:

const subComponents = ['test', 'test2'];

export { subComponents }

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');

main.js:

const subComponents = ['test', 'test2'];

export { subComponents }

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');

此时，您正在将一个不存在的

子组件

变量作为第一个参数传递给

app.component

的单个实例，并将数组作为第二个参数

app.component

应用于单个组件，第一个参数是组件的名称，第二个参数是组件本身

---

因此，如果您在名称数组中循环并使用该名称导入每个组件，然后使用该名称和导入的组件注册一个组件，它们将在整个应用程序中都可用。

如果要将此数组放入另一个文件并在此处导入，我该怎么办？我试过了，但如果它在另一个文件中，它就不起作用了。应该像你所期望的那样起作用，请编辑我的答案以包含此内容