项目场景:
项目场景:uniapp vue3版本,cli脚手架项目编译到app平台后,模板中rpx不生效,但是在css中写rpx生效bug
问题描述
例如:在写样式的过程中,发现在template中写rpx单位在浏览器上正常,但是编译到app之后,rpx单位会以px的方式渲染,导致样式不一致,例如以下示例:
<view style="width:375rpx;background-color:red;">test</view>
按照预期结果来说,375rpx会占屏幕的宽度一半,但实际渲染效果根据px渲染,结果占了一大半
原因分析:
xdm真就大无语事件,我找了很久的问题,一个个文件排查,各种配置排查,最后才查到是版本问题,我原先版本如下
"dependencies": {
"@dcloudio/uni-app": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-app-plus": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-components": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-h5": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3061620221230002",
},
"devDependencies": {
"@dcloudio/types": "^3.2.7",
"@dcloudio/uni-automator": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3061620221230002",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3061620221230002",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3061620221230002",
}
解决方案:
去uniapp官网中,vue脚手架创建教程中,去gitee下载最新的模板,把@dcloudio相关依赖复制到package.json中,替换原先的版本,删掉node_modules重新安装,如果有package-lock.json或者yarn.lock的,把lock文件和node_modules一起删掉。