vue3+vite 批量引入局部组件及使用

目录结构

批量引入组件

例如：src/views/oss/components/customComponents.ts

import { ref, defineAsyncComponent, markRaw } from 'vue';

const modules = import.meta.glob('./*.vue');

//这告诉 TypeScript，components.value 是一个键为字符串、值为 defineAsyncComponent 返回类型的对象。
const components = ref>>({});

 Object.entries(modules).forEach(([path, asyncCom]) => {
  const name = path.replace(/\.\/(.*)\.vue/, '$1');
  components.value[name] = markRaw(defineAsyncComponent(asyncCom));
});

export default components

 动态使用组件

或者单个使用

错误使用

注意：封装的批量方法仅仅只作用于批量引入组件，并未将其注册为全局组件，所以不能将其直接以组件形式使用

控制台会报出以下警告

index.vue:370  [Vue warn]: Failed to resolve component: comp1
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.