uni-app项目中使用小程序组件live-pusher、live-player，通过条件编译，运行npm run build时报错

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

uni-app项目中使用小程序组件live-pusher、live-player，通过条件编译，运行npm run build时报错

主页面是.vue文件

<!--#ifdef MP-WEIXIN-->  
<floatBox  
  class="floatBox"  
  ref="floatBox"  
  :direction="'all'"  
  :domWidth="domWidth"  
  :height="domHeight"  
  :xMove="screenWidth"  
  :yMove="screenHeight"  
  :disabledValue="isQuanPin"  
>  
  <view  
    :style="{ width: domWidth, height: domHeight + 'px' }"  
    @click="changeHuaMian"  
  >  
    <shiPinTHMini  
      :wenZhenDH="wenZhenDH"  
      :wenZhenZT="wenZhenZT"  
      ref="shiPinTH"  
      @closeWH="closeWH"  
      @changeWH="changeWH"  
      @isshiPinShow="isshiPinShow"  
      @isliaoTianShiShow="isliaoTianShiShow"  
      @fenXiangTH="fenXiangTH"  
      @updateXQ="updateXQ"  
    ></shiPinTHMini>  
  </view>  
</floatBox>  
<!--#endif-->

image

子组件shiPinTHMini 中使用了live-pusher 和live-player 标签

<template>  
    <view id="shiPinTHBig" :class="isChange ? 'merc-tuWenWZ-shiPinTH-smallStyle' : 'merc-tuWenWZ-shiPinTH-bigStyle'"  
      @click="isQuanPin && isChange ? isChange = false : ''">  
      <live-pusher id="pusherContent" max-bitrate="500" :url="publishUrl" :enable-camera="enableCamera" :enable-mic="enableMic"  
      :style="{height:'100%', position: 'absolute', width: '100%' }"  
      autopush="true" />  
      <view class="merc-tuWenWZ-shiPinTH-showHeiPing" v-show="isShowHeiPing"></view>  
    </view>  
    <view id="shiPinTHSmall" :class="isChange ? 'merc-tuWenWZ-shiPinTH-bigStyle' : 'merc-tuWenWZ-shiPinTH-smallStyle'"  
    @click="isChange ? '' : isChange = true">  
    <live-player  id="playerContent" :src="playerUrl" mode="RTC"   
      class="player"   
      @statechange="playerStateChange"  
      orientation="vertical"  
      object-fit="fillCrop"   
      :style="{height:'100%',position: 'absolute', width: '100%', top: player.top, left: player.left}"  
      autoplay="true"/>  
      <view v-if="!video_muted" class="yiShenTX">  
        <view class="merc-tuWenWZ-shiPinTH-yiShenXX-yiShenTX_img">  
          <md-image :src="require(`@/static/image/yisheng_touxiang.png`)" width="32px" height="40px"  
        ></md-image>  
        </view>  
      </view>  
</view>  
</template>

image

运行 npm run build:h5 时报错，信息如下

  • uni-view/components/live-player in ./node_modules/@dcloudio/vue-cli-plugin-uni-optimize/.tmp/components.js
  • uni-view/components/live-pusher in ./node_modules/@dcloudio/vue-cli-plugin-uni-optimize/.tmp/components.js

image


Harmonyos Next教程
1 回复

在uni-app项目中，使用小程序组件如live-pusher和live-player时，可能会遇到在构建过程中（尤其是运行npm run build）出现报错的情况。这通常是由于条件编译配置不当或组件使用方式有误导致的。以下是一个简化的代码示例和配置指南，帮助你定位和解决可能的构建错误。

1. 确保组件正确使用

首先，确保你在页面中正确使用了live-pusher和live-player组件。这里是一个简单的示例：

<!-- pages/index/index.vue -->
<template>
  <view>
    <!-- 条件编译为微信小程序 -->
    #ifdef MP-WEIXIN
      <live-pusher url="rtmp://your-rtmp-server/live"></live-pusher>
      <live-player src="rtmp://your-rtmp-server/live" autoplay></live-player>
    #endif
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

2. 条件编译配置

在uni-app中，条件编译是通过特定的注释语法来实现的。确保你的条件编译指令正确无误。上面的示例已经展示了如何在模板中使用条件编译。

3. 构建脚本检查

检查package.json中的构建脚本，确保它们符合uni-app的构建要求。通常，uni-app项目使用vue-cli-service进行构建，示例如下：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production uni-app-cli build"
  }
}

注意：这里假设你使用的是uni-app-cli，实际项目中可能使用的是vue-cli-service或其他工具。

4. 配置文件检查

检查manifest.json和pages.json等配置文件，确保页面路径、组件配置等正确无误。特别是pages.json中需要正确注册使用了live-pusher和live-player的页面。

5. 依赖和插件

确保所有依赖和插件都已正确安装。运行npm install或yarn install确保依赖完整。同时，检查是否有必要安装或更新uni-app相关插件。

6. 构建日志分析

详细查看构建日志，找到具体的错误信息。错误通常会在日志中明确指出问题所在，比如语法错误、文件缺失或配置不当等。

通过以上步骤，你应该能够定位并解决在uni-app项目中使用live-pusher和live-player组件时遇到的构建错误。如果问题依旧存在，请提供更详细的错误信息以便进一步分析。

回到顶部