vue3+vite使用import.meta.glob实现自动引入文件全局注册

背景

以往在vue中注册全局组件，都是需要先手动引入需要注册全局组件的文件，然后挨个注册，

// 在main.ts 中

import ACom from '@/components/A.vue';
import BCom from '@/components/B.vue';

Vue.component('a-com', ACom);
Vue.component('b-com', BCom);

缺点就是需要频繁的手动引入手动注册，重复的机械工作。

实现自动引入全局注册

在components的文件下新建global文件夹，这里文件夹表示是全局的组件文件，"/components/global"

在global文件下建一个index.ts文件，是全局组件入口页面

// 在components/global/index 中

/**  
 * 自动导入components/global下的vue文件，实现自动引入全局注册
 */

const globalCom = {
	install: async (Vue: any) => {
		const modules = import.meta.glob("./**/index.vue", { eager: true }); // 读取vue文件
		for (let each in modules) {
			const name = each.substring(2, each.length - 10);
			Vue.component(name, (modules[each] as any).default);
		}
	}
};
export default globalCom;

// 在main.ts 中引入

// 注册全局组件
import globalCom from "@/components/global/index";

这样就实现了在global文件下的vue文件自动引入全局注册了

～～ END～～