uni-app打包发行h5时rpx转换后出现乱码

uni-app打包发行h5时rpx转换后出现乱码

操作步骤：

1、通过HBuildX创建uni-app项目，选择默认模板
2、发行-手机H5

预期结果：

  • rpx --> 转换正确

实际结果：

  • 发现所有的rpx–> 单位的转换出现乱码

bug描述：

HBuilderX创建的项目，预览的时候正常。发行打包为h5的时候，rpx转换后变成了乱码

开发环境 版本号 项目创建方式
Windows Windows7 旗舰版 通过HBuildX创建uni-app项目，选择默认模板

image

源码.rar


更多关于uni-app打包发行h5时rpx转换后出现乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app打包发行h5时rpx转换后出现乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app项目打包H5时出现rpx转换乱码的问题，通常与CSS编译处理有关。根据你提供的信息，这可能是由于构建过程中的CSS处理器配置导致的编码问题。

建议检查以下方面：

  1. CSS Loader配置：在vue.config.js中检查是否配置了正确的CSS loader选项，确保处理rpx转换时使用UTF-8编码。

  2. PostCSS插件：uni-app使用PostCSS处理rpx转换，确认postcss.config.js中相关插件（如postcss-uniapp-plugin）配置正确，未引入编码冲突。

  3. 项目文件编码：确保项目中的CSS、Vue文件均保存为UTF-8格式，避免因文件编码不一致导致转换异常。

  4. HBuilderX版本：尝试更新HBuilderX到最新版本，确保构建工具链无已知bug。

  5. 自定义配置影响：检查是否在项目中添加了自定义webpack配置或第三方插件，可能干扰了rpx的正常转换流程。

若以上排查无效，可尝试在项目根目录创建vue.config.js，显式配置CSS loader选项：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .use('css-loader')
      .loader('css-loader')
      .options({ sourceMap: true });
  }
};
回到顶部