Vite中使用glob导入组件后为什么路径报错？

诸葛英洁提问于 2026-02-13 12:23:27 阅读 23

工具

大家好，我在用Vite+React项目里用glob导入组件时遇到了问题。按照网上的方法写了这样的代码：


import { glob } from 'glob';
const components = glob.sync('./components/*.jsx').map(path => 
  require(path).default
);

但启动时提示Cannot find module 'D:/project/components/Button.jsx'，明明文件路径是对的。试过把路径改成绝对路径、加./都不行，换成Webpack应该没问题吧？是不是Vite处理glob导入需要额外配置？

开发工具插件开发

我来解答赞 4 收藏

反馈

1 条解答

建杰酱~ Lv1

你遇到的问题是因为 Vite 对文件路径的处理机制和 Webpack 不一样。Vite 本身并不支持直接使用 Node.js 的 glob 模块来动态导入文件，它需要在构建时就能静态分析出模块的依赖关系，而 glob.sync 这种方式是运行时的操作，Vite 无法解析。

试试这个方法：用 Vite 提供的 import.meta.glob 来替代 glob。这是 Vite 内置的功能，专门用来处理这种场景。代码可以改成这样：



const modules = import.meta.glob('./components/*.jsx');



const components = Object.keys(modules).map(async (path) => {

  const module = await modules[path]();

  return module.default;

});

这里的关键点是 import.meta.glob 会返回一个对象，键是匹配到的文件路径，值是一个返回 Promise 的函数，调用后可以加载对应的模块。

另外需要注意的是，import.meta.glob 默认是懒加载的，所以需要用 await 来获取模块内容。如果你希望在构建时就把所有模块打包进来，可以在 import.meta.glob 的第二个参数传入 { eager: true }，像这样：



const modules = import.meta.glob('./components/*.jsx', { eager: true });



const components = Object.keys(modules).map((path) => {

  return modules[path].default;

});

这样做的话，modules 的值会直接是导入的模块对象，而不是一个函数。

总结一下，Vite 和 Webpack 的工作方式不同，不能直接用 Node.js 的 glob，换成 import.meta.glob 就能解决问题了。这其实是 Vite 的一个特性，虽然刚开始可能有点不习惯，但用熟了会觉得挺方便的。

2026-02-14 10:05