uniapp项目使用vue3模式打包h5端资源后 script脚本中的rpx赋值给dom后无法正常转化成px并且属性丢失

示例代码：

<template>
<view class="index" :style="[mainFontSize]">
<view class="indexheader">
<view class="indexheader--background">
<view class="index__header--background--resultContent" :style="[contentWidth]">

            </view>  

        </view>  
    </view>  
</view>  

</template>

<script>
import {
mapState
} from 'vuex'
export default {
data() {
return {
navList: [
'首页',
'起名优势',
'马上起名',
'常见问答',
'客户评价',
'荣誉资质'
],
tabIndex: 0,
info: [{
content: '内容 A'
}, {
content: '内容 B'
}, {
content: '内容 C'
}],
current: 0,
swiperMode: 'default',

        }  
    },  
    onLoad() {  

    },  
    computed: {  
        ...mapState(['isMobile']),  
        contentWidth({  
            isMobile  
        }) {  
            if (isMobile) {  
                return {  
                    width: '100vw',  
                    padding: '0 10rpx'  
                }  
            } else {  
                return {  
                    width: '2000rpx',  
                    margin: '0 auto'  
                }  
            }  
        },  
        mainFontSize({  
            isMobile  
        }) {  
            if (isMobile) {  
                return {  
                    fontSize: '26rpx',  
                    lineHeight: '40rpx'  
                }  
            } else {  
                return {  
                    fontSize: '40rpx',  
                    lineHeight: '80rpx'  
                }  
            }  
        },  

    },  
    methods: {  
        tabNavSelect(index) {  
            this.tabIndex = index  
        },  
        changeSwiper(e) {  
            this.current = e.detail.current;  
        }  
    }  
}  

</script>

<style lang="scss">
.index {
.selected {
background-color: rgb(206, 163, 95);
}
.swiper-box{
height: 30vw;
swiper-item{
width: 100%;
height: 100%;
image{
width: 100%;
}
}
}

    &__header {  
        width: 100vw;  

        &--background {  
            width: 100%;  
            height: 280rpx;  
            background: url(/static/image/index/web-bg.jpg);  
            display: flex;  
            align-items: center;  
            justify-content: center;  

            &__logo {  
                flex: 3;  
            }  

            &--resultContent {  
                display: flex;  
                align-items: center;  
                justify-content: space-between;  
            }  

            &__content {  
                flex: 2;  
                display: flex;  
                align-items: flex-end;  
                justify-content: center;  
                flex-direction: column;  

                >view:nth-child(2) {  
                    display: flex;  
                    align-items: center;  
                    justify-content: space-between;  

                    image {  
                        width: 40rpx;  
                        height: 40rpx;  
                    }  
                }  
            }  
        }  
    }  

    &__tabNav {  
        width: 100vw;  
        height: 90rpx;  
        background-color: rgb(42, 42, 50);  

        &--wrap {  
            height: 100%;  
            display: flex;  
            align-items: center;  
            justify-content: space-between;  
            color: white;  

            >view {  
                flex: 1;  
                height: 100%;  
                display: flex;  
                align-items: center;  
                justify-content: center;  

            }  

            >view:hover {  
                background-color: rgb(206, 163, 95);  
                cursor: pointer;  
            }  
        }  
    }  
}  

</style>

操作步骤：

打包成h5部署服务器后出现

预期结果：

可以正常编译r脚本中的rpx

实际结果：

未正常编译脚本中的rpx 属性丢失