uni-app 引入子组件在app端是否不支持import懒加载？小程序和H5支持。

uni-app 引入子组件在app端是否不支持import懒加载？小程序和H5支持。

开发环境 版本号 项目创建方式
Mac 11.5 HBuilderX

示例代码：

components: {
a:() => import('../a.vue'),
}

操作步骤：

在页面中使用components: { a:() => import(’…/a.vue’), }这样的方式引用子组件，真机调试，组件无法加载渲染

预期结果：

希望在app端可以使用如上方法引用子组件

实际结果：

子组件无法渲染

bug描述：

我的子组件在components使用a:() => import(’./a.vue’),引入子组件，在app端加载不进来，无法渲染


更多关于uni-app 引入子组件在app端是否不支持import懒加载？小程序和H5支持。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue3可以用这种方式：import.meta.globEager("/pages/test/*/.vue");
参考：https://ext.dcloud.net.cn/plugin?id=12558

更多关于uni-app 引入子组件在app端是否不支持import懒加载？小程序和H5支持。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


使用v-if判断一下吧

在 uni-app 中，App 端确实不支持使用 () => import() 这种动态导入语法来懒加载组件。这是因为 App 端（尤其是原生渲染模式）的组件注册机制与小程序、H5 平台存在差异。

原因分析：

  1. 平台机制不同：小程序和 H5 支持运行时动态加载组件，而 App 端（特别是原生渲染）需要在编译时确定组件依赖关系。
  2. 编译限制：App 端的组件需要在应用启动时完成注册，动态导入会导致组件注册时机过晚。

解决方案：

  1. 使用静态导入（推荐）：
import a from '../a.vue'
components: { a }
  1. 使用条件编译处理平台差异：
// #ifdef APP-PLUS
import a from '../a.vue'
// #endif

components: {
  // #ifdef APP-PLUS
  a,
  // #endif
  // #ifndef APP-PLUS
  a: () => import('../a.vue'),
  // #endif
}
回到顶部