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

实现原理

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

自动引入组件

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

代码语言：javascript复制

components
 -- A.vue
 -- B.vue

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

代码语言：javascript复制

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

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

}

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

glob import meta vite 文件系统

0 人点赞