Vue3+vite项目中如何动态导入并创建多个全局组件

蓓蕾心晴

发布于 2023-03-25 11:49:31

7K0

文章被收录于专栏：前端小叙前端小叙

背景

实际开发项目中，有些时候我们需要通过全局注册多个自定义组件，但是每个组件都导入一次，将会导致代码很冗余。

实现方案

customComponents/index.js

const modules = import.meta.glob("@/customComponents/*.vue");

const components = {
    install: function (app) {
        for (let path in modules) {
            modules[path]().then((mod) => {
                app.component(mod["default"]["name"], mod["default"]);
            });
        }
    },
};
export default components;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./modules/router";
import pinia from "./modules/pinia";

import components from "@/customComponents";

const app = createApp(App);
app.use(router);
app.use(pinia);
app.use(components);
app.mount("#app");

打印的获取的 modules 如下：

其他

我曾尝试使用 Vue3 的异步组件，使用 import 动态导入，但是会报错，如果有懂的大神帮忙解答下是什么原因

app.component("Button",defineAsyncComponent(async () => await import.meta.glob(`@/customComponents/Button.vue`)));

报错：

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of async component loader at <AsyncComponentWrapper key=0 > Uncaught (in promise) TypeError: Failed to resolve module specifier '@/customComponents/Button.vue'

vite 中动态导入方式

https://cn.vitejs.dev/guide/features.html#glob-import

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

// 以上将会被转译为下面的样子：
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

// 匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以传入 { eager: true } 作为第二个参数：

const modules = import.meta.glob('./dir/*.js', { eager: true })

注意：

import.meta.globEager 已经弃用，请使用 import.meta.glob('*', { eager: true }) 来代替。