vue3动态加载组件

Vue 2项目中使用require.context()来动态地加载模块。

但是Vue 3项目默认使用ES模块，而不是CommonJS模块。因此，你不能直接使用require()来加载模块。

在Vue 3项目中，你可以使用import.meta.glob()或import.meta.globEager()来实现类似的功能。

以下是一个例子，如何使用import.meta.glob()来动态加载Vue组件：

?

1 2 3 4

const modules = import.meta.glob('/src/components/*.vue');    // 使用时，你可以基于模块名（文件路径）来导入模块 const MyComponent = modules['./src/components/MyComponent.vue'].default;

 这段代码会创建一个对象，该对象的键是模块的路径，值是一个Promise，它会解析为模块的导出。

注意，import.meta.glob()和import.meta.globEager()返回的是一个对象，其中包含了模块的路径作为键，并且对应的值是一个Promise。你需要等待这个Promise解析后才能访问到模块的导出。

如果你想要在创建应用时就加载所有模块，可以使用import.meta.globEager()。

?

1 2 3 4

const modules = import.meta.globEager('/src/components/*.vue');    // 使用时，直接通过模块名（文件路径）来访问模块 const MyComponent = modules['./src/components/MyComponent.vue'].default;

 这段代码会同步地返回一个对象，该对象的键是模块的路径，值是模块的导出。

这些方法可以帮助你在Vue 3项目中动态地加载模块。