Vite如何实现自动引入指定目录内的组件？

实现原理

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js'),
} 

自动引入组件

假设有如下的项目文件目录：

components
 -- A.vue
 -- B.vue

通过如下代码可实现自动将该目录下的组件注册到全局组件：

/*
* @author 友人 a 丶
* @date 2022-07-11
* @app Vue 应用对象
* 批量导入指定文件夹内的所有组件
* */
export default function (app) {
    /*
    * 指定要导入的文件目录
    * 直接加载用 globEager, 懒加载用 glob
    * */
    const modules = import.meta.glob(['./components/*.vue',],{eager:true});

    /*
    * 批量引入组件
    * */
    for (let i in modules) {let name=/(.*)?/(.*).vue/.exec(i);
        app.component(name[2],modules[i].default);
    }

}

在 main.js 内调用上述方法，就可以在整个项目内直接使用这个目录下的所有组件。