uni-app 选择vue3发布到H5正式环境，自定义组件中style中使用rpx单位失效，并且样式也随之丢失

uni-app 选择vue3发布到H5正式环境，自定义组件中style中使用rpx单位失效，并且样式也随之丢失

示例代码：

<template>  
    <view class="container">  
        <view class="demo-box" :class="['demo-rpx']" :style="{width:width+'rpx',height:height+'rpx'}">测试rpx</view>  
        <view class="demo-box" :class="['demo-px']" :style="{width:width/2+'px',height:height/2+'px'}">测试px</view>  
    </view>  
</template>

操作步骤：

<template>  
    <view class="container">  
        <view class="demo-box" :class="['demo-rpx']" :style="{width:width+'rpx',height:height+'rpx'}">测试rpx</view>  
        <view class="demo-box" :class="['demo-px']" :style="{width:width/2+'px',height:height/2+'px'}">测试px</view>  
    </view>  
</template>

预期结果：

  • rpx能正常解析出来

实际结果：

  • rpx单位失效，并且样式也直接丢失

bug描述：

选择vue3发布到H5正式环境，自定义组件中，style中使用rpx单位失效，并且样式也随之丢失

附件图片宽高正常的是开发工具预览，rpx宽高失效的的为发布后的正式环境

附件demo已经提供，选择vue3发布即可验证问题。

示例图片

示例图片

相关链接 ：


更多关于uni-app 选择vue3发布到H5正式环境，自定义组件中style中使用rpx单位失效，并且样式也随之丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

如果不是bug，请标记不是bug或者回复一下

更多关于uni-app 选择vue3发布到H5正式环境，自定义组件中style中使用rpx单位失效，并且样式也随之丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<template> <view class="content"> <view :class="['rpxtest']" :style="{width:width*2 +'rpx',height:height*2+'rpx'}" > 
    </view>  
    <view :class="['pxtest']" :style="{width:100+'px',height:100+'px'}">  

    </view>  
</view>
</template> <script> export default { data() { return { title: 'Hello', width:200, height:200, } }, onLoad() { }, methods: { } } </script> <style> .rpxtest{ background-color: #007AFF; } .pxtest{ background-color: #4CD964; } </style>

没有复现到,请问你触发环境是什么样的

测试环境: vue版本-3,hx版本3.3.1 alpha

回复 小枫叶:是发布到线上的吗

不是本地测试

你的附件的demo提供下,现在看不到

选择vue3发布到线上H5环境

回复 ThorUI_echo: demo已经提供

demo预览都是可以的，vue2也是正常的，选择vue3发布到线上就会出现问题，rpx样式丢失

发行部署查看源码就会看到样式丢失


好的,我这边看一下

问题复现到了,等待官方修复

最新HBuilderX Alpha已修复

发行出现新bug了，引入wxs报错，详见：https://ask.dcloud.net.cn/question/136633

官方大哥你睡了吗，我睡不着。vue3/vite npm run dev:h5 rpx都还是原样输出，直接样式没了，src拖到hbuildx中用鼠标点点点是可以的 看图

在 uni-app 的 Vue 3 项目中，当发布到 H5 正式环境时，自定义组件内通过 :style 绑定使用 rpx 单位确实可能出现失效问题。这是因为在 H5 平台，rpx 需要被转换为 rem 单位，而转换过程可能未在动态样式中正确触发。

原因分析：

  1. 动态样式绑定：在 :style 中使用字符串拼接（如 width:width+'rpx'）时，rpx 单位可能无法被 uni-app 的样式处理器识别和转换。
  2. H5 平台的单位转换：在 H5 环境中，rpx 会根据屏幕宽度转换为 rem，但动态绑定的样式可能绕过这一转换流程。
  3. Vue 3 差异：Vue 3 的响应式系统和样式处理可能与 Vue 2 存在差异，导致此问题在 Vue 3 中更明显。

解决方案：

  1. 避免在 :style 中使用 rpx：
    将 rpx 单位移至静态 CSS 中，通过类名或静态样式定义。例如：

    <template>
  <view class="demo-box demo-rpx" :style="{width: width + 'px', height: height + 'px'}"></view>
</template>
<style>
.demo-rpx {
  width: 750rpx; /* 静态样式中使用 rpx */
}
</style>

    动态宽度和高度使用 px 单位，通过计算将 rpx 转换为 px（例如：width = 750 * (设计稿宽度 / 750)）。

  2. 使用计算属性转换单位：
    在 JavaScript 中手动将 rpx 转换为 px。例如，假设设计稿宽度为 750rpx：

    const rpxToPx = (rpx) => {
  const screenWidth = uni.getSystemInfoSync().screenWidth;
  return (rpx / 750) * screenWidth + 'px';
};

    然后在 :style 中使用：

    <view :style="{width: rpxToPx(width), height: rpxToPx(height)}"></view>
回到顶部