vite动态导入页面与动态import组件的实现方式

vite动态导入页面动态import组件

在做权限的时候

从后台拉路由表，然后动态引入组件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法

//引入所有views下.vue文件const modules = import.meta.glob("../views/**/**.vue");/** * 解析路由表 * @param routerMap 后台请求的路由表 * @returns 系统路由 */export const routerFilterFunc = (routerMap: RouterItem[]) => {  const arr: RouterItem[] = [];  routerMap.forEach(item => {    const obj: RouterItem = {      ...item,      beforeComponent: item.component    };    if (obj.children) {      obj.children = routerFilterFunc(obj.children);    }    if (item.component == "Layout") {      obj.component = RouterView;    } else {      const component = modules[`../views/${obj.component}.vue`] as any;      if (component) {        obj.component = modules[`../views/${obj.component}.vue`];      } else {        obj.component = () => import("@/views/404.vue");      }    }    arr.push(obj);  });  return arr;};

这是

import.meta.glob("../views/**/**.vue")

获取的内容

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。