uni-app 字节小程序中多个插槽公用组件被分包页面引用后编译错误 主包不能引用分包文件

uni-app 字节小程序中多个插槽公用组件被分包页面引用后编译错误 主包不能引用分包文件

示例代码：

// 公用组件代码  
<template>  
  <view>  
    <slot name="title"></slot>  
    <view v-for="(item, index) in 3" :key="index">  
      <slot name="content" :row="item"></slot>  
    </view>  
  </view>  
</template>  

// 分包界面代码  
<template>  
  <view>  
    <child-cmp>  
      <template #title>123</template>  
      <template #content="{ row }">  
        <view>{{ row }}</view>  
      </template>  
    </child-cmp>  
  </view>  
</template>

操作步骤：

npm run dev:mp-toutiao

预期结果：

代码正常运行

实际结果：

编译错误 主包不能引用分包文件: pages/subPage/subPage--child-cmp--content--97ea.json
at components/ChildCmp.json

bug描述：

在添加"scopedSlotsCompiler": "augmented"的情况下，当主包内的公用组件被分包界面引用：

  1. 使用1个插槽的情况下，打包后公用组件json文件正常，usingComponents下未引入任何文件路径。
  2. 使用2个插槽的情况下，打包后公用组件json文件的usingComponents下引入了分包界面文件夹下的插槽内容文件，导致主包引用分包文件报错

分包界面：subPage.vue
公用组件：ChildCmp.vue

测试项目已打包上传，npm install之后运行相关编译命令即可

项目信息 详细信息
产品分类 uniapp/小程序/字节跳动
PC开发环境 Windows
PC开发环境版本 Windows 10 家庭版 20H2
第三方开发者工具版本 Version: 3.2.7-1 OS: Windows_NT x64 10.0.19042 DeviceId: ebfca2b0-de6d-43a8-aff4-719057712b4f Electron: 11.2.0 Chrome: 87.0.4280.141 Node.js: 12.18.3 V8: 8.7.220.31-electron.0
基础库版本号 2.49.0.9
项目创建方式 CLI
CLI版本号 4.5.11

Image Image Image Image

my-test-project.zip


更多关于uni-app 字节小程序中多个插槽公用组件被分包页面引用后编译错误 主包不能引用分包文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

官方大哥些都不出来解答一下这是啥情况且怎么解决吗

更多关于uni-app 字节小程序中多个插槽公用组件被分包页面引用后编译错误 主包不能引用分包文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


怎么解决。。。。偶也是一样的问题。。。

不知道，还没解决

“scopedSlotsCompiler”: “augmented”, 多插槽是头条有这个问题，微信正常，看样子要手写组件了

“scopedSlotsCompiler”: “augmented”, 多插槽时只有一个插槽能拿到组件内的数据，头条有这个问题，微信正常

你有解决吗

解决了吗 跟楼一样的问题

在 Uni-App 中，如果你在主包中引用了一个包含多个插槽的公用组件，而这个公用组件被分包页面引用，可能会导致编译错误。这是因为主包不能直接引用分包中的文件，而 Uni-App 的编译机制在处理插槽时可能会出现一些问题。

解决方案

  1. 将公用组件放在主包中： 将包含多个插槽的公用组件放在主包中，而不是分包中。这样可以确保主包和分包都能正常引用该组件。

  2. 使用 usingComponents 动态引用： 如果必须将组件放在分包中，可以在分包页面的 usingComponents 中动态引用该组件。这样可以避免主包直接引用分包文件。

    例如，在分包页面的 json 文件中：

    {
  "usingComponents": {
    "my-component": "/subpackage/components/my-component/my-component"
  }
}

  3. 避免在主包中使用分包中的组件： 尽量避免在主包中使用分包中的组件。如果主包需要用到该组件的功能，可以考虑将该组件复制到主包中，或者在主包中引入一个轻量级的版本。

  4. 检查插槽的使用： 确保在组件中使用插槽时，插槽的内容是兼容的。有时候插槽内容的引用路径可能会导致问题，尤其是在分包和主包之间的引用。

  5. 使用 require 动态加载： 在某些情况下，可以使用 require 动态加载分包中的组件，但这通常用于 JS 文件的动态加载，而不是直接用于组件。

  6. 更新 Uni-App 版本： 确保你使用的是最新版本的 Uni-App，因为框架的更新可能会修复一些与分包和插槽相关的编译问题。

示例

假设你有一个公用组件 my-component，它包含多个插槽，并且被分包页面引用。

1. 将 my-component 放在主包中

将 my-component 放在 src/components 目录下，这样主包和分包都能引用它。

2. 在分包页面中动态引用

在分包页面的 json 文件中动态引用 my-component：

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}
回到顶部