vite 动态路由 import 报错

在vuecli webpack 中如下写入没有问题

      var newItem = {    //接口返回路由信息
            path: item.path,
            name: item.name,
            component: () => import('../views'+item.component)
          };

但是在vite中，会自动识别import为js模块会报错

  const _import=(path)=>import( `../views${path}.vue`)
        var newItem = {    //接口返回路由信息
            path: item.path,
            name: item.name,
            component: () => _import(item.component)

          };

使用import在vite打包后会报错，还需要使用官方的import.meta.glob,注意‘/**/’检索全部文件夹
前端做动态路由权限

vite2.0最开始在dev环境导入这样组件，发现是没问题，但是打包到线上 就会报找不到模块

   menu.component = () => import(`../views/${url}.vue`)

解决方法：

// 首先把你需要动态路由的组件地址全部获取

 let modules = import.meta.glob('../views/**/*.vue')

// 然后动态路由的时候这样来取

 menu.component = modules[`../views/${url}.vue`]

转载请注明出处:

转载自https://lxfamn.cn/blog

未经允许不得转载：lxfamn » vite 动态路由 import 报错