uni-app vue3版本app中vite编译器使用import.meta.glob报错，不能正常使用

uni-app vue3版本app中vite编译器使用import.meta.glob报错，不能正常使用

测试过的手机

所有测试手机

示例代码：

let index = import.meta.glob('../index/*.vue');  
for (let i in index) {  
    console.log(i)  
};

操作步骤：

  • vue3 vite编译器app编译结果即复现

预期结果：

  • vue3 vite编译器下app与h5均可使用import.meta.glob

实际结果：

  • vue3 vite编译器下app 使用报错，不能正常使用。
  • vue3 vite编译器下h5 使用正常。

bug描述：

vue3版本app中vite编译器使用import.meta.glob报错不能正常使用。然而在vue3版本H5中vite编译器使用import.meta.glob正常使用。 vite官方文档中是支持的，https://cn.vitejs.dev/guide/features.html#glob-import

附件


更多关于uni-app vue3版本app中vite编译器使用import.meta.glob报错，不能正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

非 H5 端不支持动态导入，后续会考虑实现的可能性。

更多关于uni-app vue3版本app中vite编译器使用import.meta.glob报错，不能正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问现在能使用import.meta.glob了吗

h5能用，小程序还是无法动态导入文件

快25年了支持了吗

现在还是不行

回复 qq1438343098: 不能放在函数里，你必须放到顶层

必须这样。。不能放到函数里。。如果是选项式必须放到import这一级，不能在函数里调用这个方法。。你可以把导入进来之后的作为参数传，函数里面你不能调用，可以先这样把这个问题解决了

在uni-app的Vue3版本中，import.meta.glob 在App端无法正常使用，这是因为App平台与H5平台的编译环境存在差异。import.meta.glob 是Vite提供的原生功能，依赖于现代构建工具（如Vite）的静态分析能力，但uni-app在App端编译时，代码会经过原生渲染引擎处理，环境与浏览器不同，导致该API不被支持。

具体来说：

  • H5平台：直接基于Vite构建，import.meta.glob 可以正常工作，因为它完全运行在浏览器环境中。
  • App平台：代码会被编译到原生环境（如iOS/Android），import.meta 这类浏览器/构建时特有的API在原生环境中未定义，因此会报错（如图片中的 import.meta is undefined）。

解决方案： 在uni-app中，App端应使用条件编译来区分平台，避免直接使用 import.meta.glob。对于动态导入需求，可以改用以下方式：

  1. 使用 uni.requireNativePlugin 或动态 import()：在App端通过条件编译调用原生模块或ES模块的动态导入。
  2. 手动管理模块路径：通过静态配置文件路径列表，结合 import() 实现动态加载。
  3. 降级到Vue2编译器：如果项目允许，Vue2版本在App端支持更稳定，但会失去Vue3特性。

示例代码（条件编译）：

// #ifdef H5
let modules = import.meta.glob('../index/*.vue');
for (let path in modules) {
    console.log(path);
}
// #endif

// #ifdef APP-PLUS
// App端改用其他方式，例如静态导入或动态import()
const moduleList = [
    '../index/page1.vue',
    '../index/page2.vue'
];
moduleList.forEach(path => {
    import(path).then(module => {
        console.log(module);
    });
});
// #endif
回到顶部