1***@qq.com
1***@qq.com
  • 发布:2025-05-13 11:34
  • 更新:2025-08-20 19:18
  • 阅读:178

vue3+i18n第二个参数无法动态渲染

分类:HBuilderX

locale.zh-Hans.json: "verifyCodes":"重新获取 {seconds} s ",
使用
html:
{{ countdown > 0 ? t('verifyCodes', { seconds: Number(countdown) }) : text }}
js:
import {
useI18n
} from 'vue-i18n';
const {
t
} = useI18n();

问题:在h5端第二个参数正常展示,如 重新获取 10 s;
在app端第二个参数变成了固定的字符串,重新获取 seconds s
请问如何才能正确展示第二个动态参数。
ps:v3+setup

2025-05-13 11:34 负责人:无 分享
已邀请:
DCloud_UNI_JBB
  • 1***@qq.com (作者)

    如果要使用你说的这种方法,需要将对应语言文件从json后缀变为js后缀,我改变文件后缀后,修改相关代码,发现最终整个项目页面都无法正常展示,除了tabbar外页面全部空白,请问这种方法确实可行吗,还是说我的操作有误。

    2025-08-19 16:03

  • DCloud_UNI_JBB

    回复 1***@qq.com: 有报错吗?

    2025-08-19 16:04

DCloud_UNI_JBB

DCloud_UNI_JBB

我测试了上面的示例代码是能正常运行的

  • 1***@qq.com (作者)

    v3语法下,是不支持这种写法的

    2025-08-20 16:11

  • 1***@qq.com (作者)

    import {

    useI18n

    } from 'vue-i18n';

    const {

    t

    } = useI18n();

    <view>

    {{t('research')}}

    </view>

    2025-08-20 16:13

DCloud_UNI_JBB

DCloud_UNI_JBB

4.76 alpha 版本的hx测试没有问题

  • 1***@qq.com (作者)

    请问你的locale文件下的对应语言类型的greeting字段如何定义的

    2025-08-20 17:09

  • DCloud_UNI_JBB

    回复 1***@qq.com: 我没有单独写一个js文件,export default {

    en: {

    greeting: ({ named }) => hello, ${named('name')}!

    },

    'zh-Hans': {

    greeting: ({ named }) => 您好, ${named('name')}!

    },

    }

    2025-08-20 17:12

1***@qq.com

1***@qq.com (作者)

我的问题就出现在这里。因为这是一个完整的项目,所以我按照官方文档的要求创建了相关json文件,这导致我无法在app端使用插值方法。
如果采用js文件创建配置语言,会导致页面空白;如果采用json文件则不支持插值。
国际化配置的官方文档:

https://uniapp.dcloud.net.cn/tutorial/i18n.html

  • 1***@qq.com (作者)

    因为json文件只支持字符串,模版字符串不支持:"verifyCodes": 重新获取 ${seconds} 秒,其效果与图片中的效果一致。

    2025-08-20 17:53

DCloud_UNI_JBB

DCloud_UNI_JBB

这是我的测试demo,你可以试下有没有问题

要回复问题请先登录注册