uni-app 同一套代码在VUE 2 编译模式下与VUE 3 编译模式下出现的问题

uni-app 同一套代码在VUE 2 编译模式下与VUE 3 编译模式下出现的问题

操作步骤：

  • 随便新建个项目，input框就能复现

预期结果：

  • 图1：VUE3模式下input中默认字体应为ios系统默认字体而不是宋体。
  • 图2：picker组件，VUE3取消和完成应该为中文。

实际结果：

  • 图1：VUE3模式下input中默认字体被改为宋体。
  • 图2：picker组件，VUE3为英文。

bug描述：

  • 同样的代码，在VUE 2 编译模式下与VUE 3 编译模式下出现的BUG
  • 图1：input中默认字体被改变
  • 图2：picker组件，VUE2为中文，VUE3为英文。
信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 WIN10
HBuilderX类型 正式
HBuilderX版本号 3.3.4
手机系统 iOS
手机系统版本号 iOS 12.0
手机厂商 苹果
手机机型 iphoneX
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

图片1 图片2


更多关于uni-app 同一套代码在VUE 2 编译模式下与VUE 3 编译模式下出现的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

字体问题在旧版是否正常？ picker组件问题已确认，相关问题贴

更多关于uni-app 同一套代码在VUE 2 编译模式下与VUE 3 编译模式下出现的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已排查到原因，视图层 html 节点定义的 lang 不同导致，暂不进行统一处理（为日后的国际化考虑）
临时解决办法：在 css 内指定字体或在页面的根节点定义 lang 属性
<template>
<view lang="zh-CN" class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>

感谢！

picker组件显示英文的问题，HBuilderX alpha 3.3.7 已修复

这是Vue 3编译模式下uni-app的已知问题，主要涉及两个方面的差异：

  1. input字体问题：Vue 3模式下，iOS设备上input组件的默认字体确实会显示为宋体而非系统默认字体。这是因为Vue 3的编译模式对样式处理机制有所改变，导致系统字体继承失效。

  2. picker组件国际化：Vue 2模式下picker组件会自动适配系统语言（iOS显示中文），而Vue 3模式下目前显示为英文。这是因为Vue 3版本对原生组件的语言包处理逻辑尚未完全适配。

临时解决方案：

对于字体问题，可以在App.vue或页面样式中添加：

input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

对于picker国际化问题，目前需要手动设置语言：

// 在页面中设置
uni.setLocale('zh_CN')
回到顶部