vue3动态路由报错如何解决？

Question

> async function loadAsyncRoutes() {
  // 本地获取用户信息
  let userInfo = storage.getItem("userInfo");
  if (userInfo.token) {
    try {
      // 接口获取菜单
      const { menuList } = await api.getPermissionList();
      // 处理菜单层级关系
      let routes = utils.generateRoute(menuList)
      const modules =  import.meta.glob('../views/*.vue')
      routes.map(route => {
        const url = `../views/${route.name}.vue`
        route.component = modules[url]
        router.addRoute('home', route)
      })
      console.log('b')
    } catch (error) {
      console.log(error)
    }
  }
}
console.log(1)
await loadAsyncRoutes() // 没有执行
console.log('router.getRoutes()', router.getRoutes())
console.log(2)

终端中报错

C:/Users/xxx/Desktop/project/manager-fe/src/views/Login.vue
56 |              const url = `../views/${route.component}.vue`;
57 |              route.component = () => import(url);
58 |              this.$router.addRoute("home", route);
   |                                             ^
59 |            });
60 |          } catch (error) {}
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the 
/* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: C:/Users/xxx/Desktop/project/manager-fe/src/views/Login.vue

有时候代码可以正常运行，但大多数无法运行，请问这是什么原因？该怎么解决？

Answer 1

根据错误提示，你应该装一个@rollup/plugin-dynamic-import-vars插件来支持动态引用

Answer 2

有的时候可以运行，

 let routes = utils.generateRoute(menuList)
      const modules =  import.meta.glob('../views/*.vue')
      routes.map(route => {
        const url = `../views/${route.name}.vue`
        route.component = modules[url]
        router.addRoute('home', route)
      })

是不是这里处理不对，
在执行addRoute之前输出下route结构，跟正常的结构是不是一样

Answer 3

es6 的动态 import 不支持动态参数，可以使用 vite 提供的 glob 功能