Vite打包后动态路由加载失败的问题

1、问题

vite打包部署后，跳转路由出现以下问题： TypeError: Failed to fetch dynamically imported module:

2、原因

vite打包时，动态导入的模块不会被直接打包，导致加载失败

3、解决方案

  使用vite官网提供的动态导入方式：import.meta.glob函数从文件系统导入多个模块：

  const modules = import.meta.glob('./dir/*.js')

  例如我的项目，在处理动态路由的文件中，写入：   其中，我的前端对应路径为/src/views/user/list，其中 /** /** 为动态加载的地址

  // 使用 import.meta.glob 动态导入所有视图组件
  const modules = import.meta.glob("/src/views/**/**.vue");
  // 添加动态路由
  router.addRoute ({
        name: menu.menuName,
        path: menu.path,
        component: modules[`/src/views${menu.path}.vue`],
      })

4、其他

查看现有路由，成功添加动态路由：

使用这种方法匹配到的文件默认是懒加载的：