vite2不能使用webpack的require.context()方式读取文件
vite2有自己的方法：
1、import.meta.glob()
2、import.meta.globEager()
在src/components 文件夹下创建index.js文件
// index.js文件
// 公共组件规范：
// 1、在src/components目录下创建目录，目录结构为一级，即 src/components/组件目录/xxx.vue
// 2、目录名称必须与组件使用时的名称一致, 即目录名就是组件名
// 例：有一个公共组件 <submit-confirm />那么在创建目录时，目录的名称必须为SubmitConfirm
// src
// components
// SubmitConfirm
// index.vue // vue文件的名称可以随便定义
import { defineAsyncComponent } from 'vue'
// 获取src/components文件夹下所有vue文件,可以根据项目需求，
// 在components下创建一个global文件夹专门放置所有的公共组件
// const components = import.meta.glob('./global/*/*.vue')
const components = import.meta.glob('./*/*.vue')
export default function install (app) {
for (const [key, value] of Object.entries(components)) {
// 因为我设计的是组件名称就是目录名称，所以这里这样取，也可以根据vue的文件名称，看个人喜好
const name = key.split('/')[1]
// 这里的main是我的layout，不需要注册为公共组件
if (name !== 'main') {
app.component(name, defineAsyncComponent(value))
}
}
}
在main.js文件中import并use
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from './components/index.js'
createApp(App).use(components).mount('#app')
在项目的其它位置就可以直接使用创建的公共组件了 如上面SubmitConfirm组件
// src/views/home.vue
<template>
<submit-confirm />
</template>
宿醉好难受，可能写的不是很明白，但是上面代码直接用没问题。希望可以帮到需要的人
