uni-app vue3 cli项目不支持vue-18n的<i18n-t></i18n-t>吗

uni-app vue3 cli项目不支持vue-18n的<i18n-t></i18n-t>吗

测试过的手机

  • iphone12pro
  • 小米12

示例代码：

<template>  
   <i18n-t  
        tag="span"  
        keypath="hopecloud.app.serve.healthConsultation.errorInfo"  
    >  
        <template v-slot:day>  
            <span class="bold-number">  
                {{ totalNum }}  
            </span>  
        </template>  
    </i18n-t>  
</template>

<script setup lang="ts">  
const totalNum = 1;  
</script>

操作步骤：

  • 看问题描述

预期结果：

  • 预期真机表现和h5一致

实际结果：

  • h5支持，真机貌似不支持

bug描述：

uniapp vue3 cli项目 APP端不支持vue-18n的<i18n-t></i18n-t>吗，运行到H5上是可以正常的，但是真机运行到安卓以及ios上就不行了

Image 1 Image 2


更多关于uni-app vue3 cli项目不支持vue-18n的<i18n-t></i18n-t>吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你好，请提供一下一个可以复现的项目

更多关于uni-app vue3 cli项目不支持vue-18n的<i18n-t></i18n-t>吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue3项目使用vue-i18n插件，并且使用i18n-t组件，在真机上就能复现了

在 uni-app Vue3 CLI 项目中，<i18n-t> 组件在 App 端确实存在兼容性问题。这是由于 uni-app 的 App 平台和小程序平台使用了自定义的渲染引擎，而非完整的 Web 环境，导致部分 Vue I18n 的高级功能无法正常使用。

具体原因：

  1. uni-app 的 App 端基于原生渲染，模板编译和节点处理方式与 H5 不同
  2. <i18n-t> 组件依赖的插槽和动态模板功能在非 H5 平台支持不完善
  3. 真机运行时，Vue I18n 的部分运行时特性被 uni-app 的编译优化影响

解决方案： 使用传统的 $t 方法配合模板插值：

<template>
  <span>
    {{ $t('hopecloud.app.serve.healthConsultation.errorInfo', { day: totalNum }) }}
  </span>
</template>

在语言包中配置：

{
  "hopecloud": {
    "app": {
      "serve": {
        "healthConsultation": {
          "errorInfo": "{day} 天"
        }
      }
    }
  }
}

如果需要样式处理，可以额外包装 span：

<template>
  <span>
    {{ $t('hopecloud.app.serve.healthConsultation.errorInfo', { day: totalNum }).replace(totalNum.toString(), `<span class="bold-number">${totalNum}</span>`) }}
  </span>
</template>
回到顶部