uni-app h5发布后rpx单位变乱码
uni-app h5发布后rpx单位变乱码
操作步骤：
- 使用的是HBuilder X创建的uni-app项目，h5发布后rpx单位变乱码，且只有一处样式出现问题
预期结果：
- 本地运行是正常的，h5发布后rpx单位变乱码
实际结果：
- 本地运行是正常的，h5发布后rpx单位变乱码
bug描述：
- 本地运行是正常的，h5发布后rpx单位变乱码
附件
项目信息
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/H5 |
| PC开发环境 | Windows |
| PC开发环境版本 | 20H2 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.1.4 |
| 浏览器平台 | 微信内置浏览器 |
| 浏览器版本 | 8.0.1 |
| 项目创建方式 | HBuilderX |
| App下载地址或H5网址 | https://cd.taojianlou.com/ut1/auction-web/pages/sub/product/productDetail?productInstanceCode=0616fb4a004e3839cc5bed97ead568ca |
更多关于uni-app h5发布后rpx单位变乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
这是一个典型的 H5 发布后 rpx 单位转换异常问题。根据你提供的截图和描述，问题可能出在以下几个方面：
-
CSS 压缩配置问题：在 HBuilderX 打包 H5 时，CSS 压缩可能导致 rpx 单位被错误处理。检查
vue.config.js中的css配置，确保没有启用过于激进的压缩策略。 -
PostCSS 插件冲突：uni-app 内置的 PostCSS 插件在转换 rpx 时可能出现异常。尝试在项目根目录创建
postcss.config.js，添加以下配置：
module.exports = {
plugins: {
'autoprefixer': {},
'uni-postcss': {}
}
}
- 特定样式写法问题：从截图看，只有部分样式异常，检查异常样式的写法。避免在同一个样式声明中混用 rpx 和其他单位，例如：
/* 避免这样写 */
.width {
width: 100rpx !important;
}