在vite中怎么批量注册组件
1. 在webpack中使用require来获取组件
/ 参数:1. 目录 2. 是否加载子目录 3. 加载的正则匹配 //匹配当前文件夹下的所有.vue文件 注册全局组件 const importFn = require.context('./', false, /\.vue$/) // console.dir(importFn.keys()) 文件名称数组 export default { install (app) { // 批量注册全局组件 importFn.keys().forEach(key => { // 导入组件 const component = importFn(key).default // 注册组件 app.component(component.name, component) }) } } // 在main.js中使用 import allComponent from '@/components/library/index.js' createApp(App) .use(store) .use(router) .use(allComponent) .mount('#app')
2. 在vite中使用 import.meta.glob
const app = createApp(App); // 批量注册全局组件 const components = import.meta.glob('./components/uiSchema/itemComponents/*.vue') for (const [key, value] of Object.entries(components)) { const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.')) console.log('当前组件时',name); app.component(name, defineAsyncComponent(value)) }