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

分类：uni-app

bug已修复

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： macOS Monterey 12.0.1

HBuilderX类型： Alpha

HBuilderX版本号： 3.3.1

浏览器平台：手机系统浏览器

浏览器版本：所有

项目创建方式： HBuilderX

示例代码：

<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发布即可验证问题。

2021-12-14 14:37 负责人:无分享

9 个回复

ThorUI_echo (作者) - 开源项目： https://thorui.cn/doc

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

小枫叶 - 外包接单加v:wlmk1234567 注明来意

<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>

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