Vue3 + vite2.0 + addRoutes 动态路由

业务需求：根据后台返回的路由表进行路由加载

代码：

        比较不同的是vite的引用方式，再开发中使用 `import` 引用组件并不会报错，打包发布后会提示找不到文件，所有component组件引用部分代码调整如下：

        vite中 import() 替换为 import.meta.glob('../views/*.vue') s根据自己项目的目录层级来写引用的文件夹；

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

/**
 * 动态添加路由
 */
// const addRoutes = (routes = []) => {
//   routes.forEach((item) => {
//     if (item.path) {
//       const route = {
//         path: item.path,
        component: modules['../views' + item.path + '.vue'],
//       }
//       router.addRoute(route);
//     }
//   })
// };

import router from '@/router'
import store from "storejs";

/**
 * 注册路由
 */
export const registerRoutes = () => {
  return new Promise((resolve, reject) => {
    const routerMap = store.get('router')
    // 添加404页面
    router.addRoute({
      path: "/:catchAll(.*)",
      redirect: "/404",
      name: "NotFound",
    })

    if (routerMap.length) {
      addRoutes(routerMap);
      resolve(true);
    }
  })
}
const modules = import.meta.glob('../views/*.vue')
/**
 * 动态添加路由
 */
const addRoutes = (routes = []) => {
  routes.forEach((item) => {
    debugger
    if (item.path) {
      const route = {
        path: item.path,
        component: modules['../views' + item.path + '.vue'],
      }
      router.addRoute(route);
    }
  })
};