vite2 + vue3.0 + js 自动注册加载全局公共组件

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>

宿醉好难受，可能写的不是很明白，但是上面代码直接用没问题。希望可以帮到需要的人