使用vite的 GlobImport 动态导入多个vue页面

在使用vite实现后台管理系统的时候，有个需求是动态导入views文件夹下面的所有页面，在vite1.0版本的时候只能手动写映射关系，升级到vite2.0之后，在本地使用没有问题，打包上生产直接裂开~~，vite提供了一个Glob Import方法。

如果直接使用import.meta.glob，vscode会报类型ImportMeta上不存在属性“glob”的错误，需要在tsconfig文件下添加类型定义vite/client

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

之前的代码如下:

//routes
 {
    path: "/login",
    name: "login",
    component: () => import("/@views/system/login/index.vue"),
  },

使用Glob Import改写代码 动态添加

//引入所有views下.vue文件
const modules = import.meta.glob("../views/**/**.vue")
//使用modules
export const routerPackag = function (routers: any) {
  if (routers) {
    routers.filter((itemRouter: any) => {
      if (itemRouter.component != "Layout") {
        router.addRoute("home", {
          path: `${itemRouter.path}`,
          name: itemRouter.name,
          meta: {
            title: itemRouter.name,
          },
          component:
            // import(/* @vite-ignore */ `/@views/${itemRouter.component}`),
            modules[/* @vite-ignore */ `../views/${itemRouter.component}`],
        })
      }
      if (itemRouter.children && itemRouter.children.length) {
        routerPackag(itemRouter.children)
      }
      return true
    })
  }
}

标签：vue,views,component,glob,itemRouter,meta,import,vite
来源： https://blog.csdn.net/qq1161839630/article/details/119598248