vite动态导入页面动态import组件实现方式
作者：yangliweigauguagua
本文总结了在使用Vite进行动态导入页面和组件时遇到的问题,由于Vite与Webpack在处理动态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")获取的内容
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。