vite 使用import.meta.glob动态添加vue页面

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

在使用vite实现后台管理系统的时候，有个需求是动态导入views文件夹下面的所有页面，vite提供了一个Glob Import方法。

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

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

之前的代码

export function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = {...route}
    //if (hasPermission(roles, tmp)) {
      const component = tmp.component
      if (route.component) {
        if (component == 'Layout') {
          tmp.component = Layout
        } else {
          tmp.component = (resolve) => require([`@/views/${component}`], resolve)
        }
        if (tmp.children) {
          tmp.children = filterAsyncRoutes(tmp.children, roles)
        }
      }
      res.push(tmp)
    //}
  })
  return res
}

使用import.meta.glob 改写代码，动态添加

const modules = import.meta.glob('../../views/**/**.vue');
export const filterAsyncRoutes = (
  routes: RouteRecordRaw[],
  roles: string[]
) => {
  const res: RouteRecordRaw[] = [];
  routes.forEach(route => {
    const tmp = { ...route } as any;
    // if (hasPermission(roles, tmp)) { // 目前没有给菜单设置权限，所以暂时去掉
    if (tmp.component == 'Layout') {
      tmp.component = Layout;
    } else {
      const component = modules[`../../views/${tmp.component}.vue`] as any;
      if (component) {
        tmp.component = modules[`../../views/${tmp.component}.vue`];
      } else {
        tmp.component = modules[`../../views/error-page/404.vue`];
      }
    }
    res.push(tmp);

    if (tmp.children) {
      tmp.children = filterAsyncRoutes(tmp.children, roles);
    }
    // }
  });
  return res;
};