vue3+vite动态导入

215 阅读1分钟
// import McContainer from '@material/McContainer/index.vue';
// import McTab from '@material/McTab/index.vue';
// import McInput from '@material/McInput/index.vue';
// import McTitle from '@material/McTitle/index.vue';

// export const GLOBAL_MATERIAL_COMPONENTS: any = {
//   McContainer,
//   McTab,
//   McInput,
//   McTitle,
// };
async function loadModules() {
    // import.meta.glob必须以路径模式为起点
  const modules = import.meta.glob('@material/*/index.vue');
  let result: any = {};
  for (let i in modules) {
    const name = i.split('/')[3];
    result[name] = await defineAsyncComponent(modules[i] as any);
  }
  return result;
}
const GLOBAL_MATERIAL_COMPONENTS:any =  await loadModules();
//---------------------------导入文件---------------------------
const files: any = import.meta.glob('@material/**/*.json', { eager: true });
Object.keys(files).forEach((key: any) => {
    let config = { component: name, ...files[key]['default'] };
})
 <component :is="GLOBAL_MATERIAL_COMPONENTS[element.component]" v-bind="element" />