在webpack中我们只需要

component: () => import(`@/views${r.component}`)

但是在vite中，我们需要官方推荐的import.meta.glob引入动态文件来解决这个问题。

const modules=import.meta.glob("../views/**/**.vue")
component: modules[`../views${r.component}`],

完整代码

import layout from "@/layout/index.vue";
import type { menuItem } from "@/types/user";
const modules = import.meta.glob("../views/**/**.vue");

export function generateRouter(userRouters: any) {
  let newRouters;

  newRouters = userRouters.map((r: any) => {
    const routeObj = {
      id: "",
      path: "/",
      component: layout,
      children: [] as menuItem[],
    };
    routeObj.children = [];
    let routes: any = {
      path: r.routePath,
      icon: r.icon,
      meta: {
        title: r?.name,
      },
      component: modules[`../views${r.component}`],
    };

    routeObj.children.push(routes);
    return routeObj;
  });
  return newRouters;
}