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

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

3.2.15

浏览器平台：

Chrome

浏览器版本：

96.0.4664.45（正式版本）（64 位）

示例代码：

<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%;
}
}
}

&amp;__header {
width: 100vw;

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

&amp;__logo {
flex: 3;
}

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

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

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

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

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

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

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

}

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

更多关于uni-app项目使用vue3模式打包h5端资源后 script脚本中的rpx赋值给dom后无法正常转化成px且属性丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

此问题已被官方复现，等待修复，详见 https://ask.dcloud.net.cn/question/136238

nodeper 2楼

HBuilderX3.3.3 已修复，请升级

itying888 3楼

这是一个典型的 uni-app H5 端 rpx 转换问题。在 Vue3 模式下，通过 JavaScript 动态赋值的 rpx 单位在 H5 端确实可能无法正常转换为 px。

问题分析：

rpx 转换机制：uni-app 在编译时会将模板中的 rpx 转换为 px，但通过 JS 动态赋值的样式不会经过这个转换过程
H5 端差异：在 H5 端，rpx 需要依赖 uni-app 的运行时转换机制，而动态赋值的 rpx 可能无法被正确识别

解决方案：

方案一：使用 uni.upx2px() 函数手动转换（推荐）

computed: {
  contentWidth({ isMobile }) {
    if (isMobile) {
      return {
        width: '100vw',
        padding: `0 ${uni.upx2px(10)}px`
      }
    } else {
      return {
        width: `${uni.upx2px(2000)}px`,
        margin: '0 auto'
      }
    }
  },
  mainFontSize({ isMobile }) {
    if (isMobile) {
      return {
        fontSize: `${uni.upx2px(26)}px`,
        lineHeight: `${uni.upx2px(40)}px`
      }
    } else {
      return {
        fontSize: `${uni.upx2px(40)}px`,
        lineHeight: `${uni.upx2px(80)}px`
      }
    }
  }
}

方案二：使用 CSS 变量和响应式设计

<template>
  <view class="index" :class="{'mobile': isMobile, 'pc': !isMobile}">
    <!-- 内容 -->
  </view>
</template>

<style lang="scss">
.index {
  &.mobile {
    font-size: 26rpx;
    line-height: 40rpx;
    
    .index__header--background--resultContent {
      width: 100vw;
      padding: 0 10rpx;
    }
  }
  
  &.pc {
    font-size: 40rpx;
    line-height: 80rpx;
    
    .index__header--background--resultContent {
      width: 2000rpx;
      margin: 0 auto;
    }
  }
}
</style>

方案三：使用条件编译

computed: {
  contentWidth({ isMobile }) {
    #ifdef H5
    if (isMobile) {
      return {
        width: '100vw',
        padding: '0 5px' // 手动计算 rpx 转 px
      }
    } else {
      return {
        width: '1000px', // 手动计算 rpx 转 px
        margin: '0 auto'
      }
    }
    #endif
    
    // 其他平台保持原样
    if (isMobile) {
      return {
        width: '100vw',
        padding: '0 10rpx'
      }
    } else {
      return {
        width: '2000rpx',
        margin: '0 auto'
      }
    }
  }
}