vite动态导入页面动态import组件实现方式

Vite 下动态导入页面组件，如何绕过“老套路”

搞过后台权限系统的朋友应该都懂，从后端拉取路由表，然后根据路由配置去动态加载对应的页面组件，这几乎是标配功能。之前用 Webpack 的时候，配合 `require.context` 或者 `import()` 方法，一套组合拳下来挺顺手的。但换到 Vite 之后，这套“祖传”写法就行不通了，编译阶段直接报错。

原因其实不复杂：Vite 依赖 ES Module 的静态分析特性，像 `import()` 这种动态路径，它没办法在打包时进行预编译。那么，问题就变成了——如何在 Vite 下实现同样的动态组件匹配？

这里的关键，是 Vite 提供的一个全局变量方法：import.meta.glob。它允许你通过模式匹配，在构建时就“捕获”所有符合条件的模块。具体怎么做？看下面这个函数：

// 引入所有 views 目录下的 .vue 文件
const modules = import.meta.glob("../views/**/**.vue");

/**
 * 解析路由表（与后端返回的路由配置匹配）
 * @param routerMap 后台返回的路由表
 * @returns 处理后的系统路由
 */
export const routerFilterFunc = (routerMap: RouterItem[]) => {
  const arr: RouterItem[] = [];

  routerMap.forEach(item => {
    const obj: RouterItem = {
      ...item,
      beforeComponent: item.component  // 保留原始组件字段备用
    };

    // 递归处理子路由
    if (obj.children) {
      obj.children = routerFilterFunc(obj.children);
    }

    // 组件字段处理：如果是 Layout 则用 RouterView 代替
    if (item.component == "Layout") {
      obj.component = RouterView;
    } else {
      // 核心：根据路径动态匹配到对应的模块
      const component = modules[`../views/${obj.component}.vue`] as any;
      if (component) {
        obj.component = modules[`../views/${obj.component}.vue`];
      } else {
        // 找不到时，回退到 404 页面
        obj.component = () => import("@/views/404.vue");
      }
    }

    arr.push(obj);
  });

  return arr;
};

这段代码的核心逻辑其实不复杂：先用 import.meta.glob 把 views 下所有 .vue 文件都“登记在册”，得到一个对象。然后遍历后端返回的路由表，根据每个路由项里的 component 字段（比如 "/system/user"），去这个对象里找到对应的模块并赋值给路由组件。

如果匹配不上，说明路由配置有问题或者页面还没写，直接走一个兜底的 404 组件。这种做法既保证了动态加载的效率，又兼容了后端动态路由的灵活性。

至于 import.meta.glob 到底返回了什么？它其实是一个对象，key 是相对路径，value 是一个返回 Promise 的懒加载函数。打印出来大概长这样：

总结

总的来说，从 Webpack 切换到 Vite，其实不是功能的缩水，而是构建理念的升级。动态导入这块，只要掌握了 import.meta.glob 这个工具，配合后端的路由表解析，完全可以实现无缝迁移。上面的代码方案在生产项目中已经跑得很稳，希望能给正在折腾类似问题的同学一点启发。