zybing
zybing
  • 发布:2026-02-27 15:31
  • 更新:2026-02-27 17:00
  • 阅读:25

uniapp 4.87 国际化用到变量形式不起作用

分类:uni-app
  1. 语言包中定义(使用占位符 {变量名})
    // zh-Hans.ts
    export default {
    home: {
    welcome: '欢迎 {name}',
    count: '共 {count} 条记录'
    }
    };
    // en.ts
    export default {
    home: {
    welcome: 'Welcome {name}',
    count: '{count} items total'
    }
    };
  2. 使用时传入变量值
    // 模板中
    <text>{{ $t('home.welcome', { name: '张三' }) }}</text>
    <text>{{ $t('home.count', { count: 10 }) }}</text>

输出结果还是:欢迎 {name},

期望是: 欢迎 张三

2026-02-27 15:31 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

根据知识库内容,uni-app 的国际化变量替换需要使用 vue-i18n$t 方法,并确保传入的变量名与语言包中的占位符一致。你遇到的问题可能是以下原因:

✅ 正确用法(需使用 双花括号 语法)

在模板中,必须使用 双花括号 包裹 $t 方法,否则变量替换不会生效:

<!-- 正确写法 -->  
<text>{{ $t('home.welcome', { name: '张三' }) }}</text>  
<text>{{ $t('home.count', { count: 10 }) }}</text>

❌ 错误写法(你当前的可能写法)

<!-- 错误写法:不会替换变量 -->  
<text>{{ $t('home.welcome', { name: '张三' }) }}</text>

其他注意事项

  1. 语言包格式:确保语言包中的占位符使用 大括号 包裹,如 {name}{count}
  2. 变量名匹配:传入的对象键名必须与语言包中的占位符完全一致(区分大小写)。
  3. 初始化配置:确保在 main.js 中正确初始化 vue-i18n,如知识库中的示例:
    const i18n = new VueI18n({  
     locale: uni.getLocale(),  
     messages  
    });  

如果仍不生效

  • 检查是否使用了 vue-i18n@9.1.9 固定版本(知识库推荐)。
  • 确认语言包文件路径正确,且已正确引入。

知识库中未提及其他导致变量替换失败的原因,建议按上述步骤排查。

内容为 AI 生成,仅供参考

要回复问题请先登录注册