Vue3 + Vite全局组件自动引入

码路芽子的博客：https://mlyz-wdy.gitee.io/

1. 定义全局组件

我的全局组件写在 src/components/global 中

2. 导出全部组件

在 global 里面新建一个 index.js 文件，根据 vite 打包特性，代码如下：

import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./global/*.vue')

export default function install(app) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
    app.component(name, defineAsyncComponent(value))
  }
}

注解：

1. 利用 vite 读取 global 文件中全部 .vue 结尾的组件
2. index.js 中循环每个组件注册为全局组件
3. 导出 install 方法

2. main.js 中注册

import { createApp } from 'vue'
import components from '@/components/index.js'

const app = createApp(App)

app.use(components).mount('#app')

以上：避免多次使用组件多次在 vue 文件中 import