Project scenario:
Project scenario: uniapp vue3 version, after the cli scaffolding project is compiled to the app platform, rpx in the template does not take effect, but writing rpx in css takes effect bug
Problem Description
For example: During the process of writing styles, I found that writing the rpx unit in the template works fine on the browser, but after compiling it into the app, the rpx unit will be rendered in px, resulting in inconsistent styles, such as the following example:
<view style="width:375rpx;background-color:red;">test</view>
According to the expected result, 375rpx will occupy half of the screen width, but the actual rendering effect is based on px rendering, and the result accounts for more than half.
Cause Analysis:
xdm is really a speechless incident. I have been looking for the problem for a long time, checking files one by one, checking various configurations, and finally found out that it is a version problem. My original version is as follows
"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",
}
solution:
Go to the uniapp official website, vue scaffolding creation tutorial, go to gitee to download the latest template, copy @dcloudio related dependencies to package.json, replace the original version, delete node_modules and reinstall, if there is package-lock.json or yarn .lock, delete the lock file and node_modules together.