怎样快速做网站,商标注册证号查询官网,高端装修公司门头设计效果图,网站图片切换import.meta.glob 是vite提供的批量懒加载组件的方法
本地开发环境#xff1a;
const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map#xff1a; key是vue文件的相对路径#xff0c;值是一个函数#xff0c;将函数打印出来#xff0c;如…import.meta.glob 是vite提供的批量懒加载组件的方法
本地开发环境
const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map key是vue文件的相对路径值是一个函数将函数打印出来如下
() import(/src/views/xxxxx.vue?t1721728770051) 本质上是一个按需加载的函数。
打包构建后 vite本地构建使用的是esbuild本地服务之所以能够识别.vue文件是因为本地服务做了支撑。本地服务将.vue文件转换为了.js文件 本地服务器返回了javascript代码这个也容易实现服务器判断如果是.vue结尾的对源码进行编译响应为js即可。 然而打包构建vite使用的是rollup。生产服务器不会支持对.vue文件的处理。 打包构建后的代码modules的key是不变的。但是值函数却变了里面导入的是构建后的.js文件。 应用 在实现动态菜单的时候需要从后端获取路由数据然后因为涉及到按需加载
/*** 动态导入组件* param url* returns*/function dynamicImport(url:string){return ()import(url)}/*** route的初始化处理* params routers - ajax请求返回的结果*/async function routeInit(routers:RouteType[]){routers.forEach(route {if(route.component ConsoleLayout){route.component ConsoleLayout}else{route.component dynamicImport(route.component as string)}if(route.children route.children.length 0 ){routeInit(route.children)}})return routers}
component需要按需加载因此需要将route.component的值变为()import()的形式。然而功能实现后才发现构建后会存在.vue的问题。
因此解决办法就是import.meta.glob。
const modules import.meta.glob(../views/**/*.vue)function loadView(url: string) {return modules[../views/${url}.vue]
}route.component loadView(name as string)
这样就能够实现兼容本地和打包构建后的动态菜单的功能而原理就是上面分析的。
