uni-app开发微信小程序时在一个分包中加载另一个分包组件报not found

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app开发微信小程序时在一个分包中加载另一个分包组件报not found

开发环境 版本号 项目创建方式
Windows 记不到了 HBuilderX

操作步骤：

.

预期结果：

希望 告知哈如何配置组件的componentPlaceholder

实际结果：

没

bug描述：

在分包A的组件A1里去用分包B的一个组件B1，注意：是在分包A的组件里去用，不是注册到pages的这个页面

出现了异步加载分包B的组件not found

排查了原因，打包后，分包A的组件A1里面的JSON文件配置不了componentPlaceholder，所有失败了，

但是在分包A注册在pages的页面去用组件B1，然后在pages.json文件注册分包A 的componentPlaceholder就可以成功


Harmonyos Next教程
1 回复

在uni-app开发微信小程序时，如果尝试在一个分包中加载另一个分包的组件并遇到“not found”错误，这通常是由于分包加载机制的限制导致的。微信小程序官方文档中明确指出，分包之间不能直接引用彼此的资源，包括组件、页面、静态文件等。每个分包需要独立运行，并且只能访问自己的资源或主包中的资源。

为了解决这个问题，你可以考虑以下几种替代方案：

方案一：将共享组件提取到主包中

将需要在多个分包中使用的组件提取出来，放到主包中。这样，所有分包都可以通过相对路径或绝对路径引用主包中的组件。

示例代码：

假设主包目录结构如下：

/pages
  /index
    index.vue
/components
  sharedComponent.vue
/subpackages/
  /packageA
    /pages
      pageA.vue

在pageA.vue中引用主包中的组件：

<template>
  <view>
    <shared-component></shared-component>
  </view>
</template>

<script>
import SharedComponent from '@/components/sharedComponent.vue';

export default {
  components: {
    SharedComponent
  }
}
</script>

方案二：使用npm包管理共享组件

如果项目结构允许，可以将共享组件打包成npm包，然后在各个分包中通过npm安装引用。

步骤：

  1. 将共享组件打包成npm包。
  2. 在uni-app项目的根目录下运行npm install安装该npm包。
  3. 在分包中通过import或require引用该npm包中的组件。

示例代码（假设npm包名为my-shared-components）：

<template>
  <view>
    <my-shared-component></my-shared-component>
  </view>
</template>

<script>
import MySharedComponent from 'my-shared-components';

export default {
  components: {
    MySharedComponent
  }
}
</script>

注意

  • 确保在manifest.json中正确配置了分包路径和主包路径。
  • 使用npm包管理时，需要注意小程序对包体积的限制，避免打包后的体积过大。
  • 如果组件中包含静态资源（如图片、样式文件），需要确保这些资源也能被正确引用。

通过上述方案，你可以有效解决uni-app开发微信小程序时分包间组件引用的问题。

回到顶部