uniapp i18n 不解析插值是怎么回事？

我在使用uniapp的i18n插件时，发现插值语法没有被正确解析。比如我在语言文件中定义了"message": “Hello, {name}”，然后在模板里使用$t(‘message’, {name: ‘World’})，结果页面直接显示"Hello, {name}“而不是预期的"Hello, World”。有人知道这是什么原因吗？

2 回复

uniapp i18n不解析插值可能是因为：

  1. 使用了错误的插值语法，应使用{key}格式
  2. 未在语言包中正确定义变量
  3. 未正确调用$t方法传参
  4. 检查是否在template中正确使用{{$t(‘key’, {param: value})}}

建议检查语言包配置和调用方式。


在 UniApp 中使用 i18n（如 vue-i18n）时，如果插值（如 {{ message }}）未被解析，通常由以下原因导致：

常见原因及解决方案

  1. 未正确配置 vue-i18n

    • 确保在 main.js 中正确安装和初始化：
      import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh', // 默认语言
  messages: {
    zh: { welcome: '你好, {name}!' },
    en: { welcome: 'Hello, {name}!' }
  }
})

const app = createApp(App)
app.use(i18n).mount('#app')

  2. 模板中使用方式错误

    • 在 Vue 模板中，需通过 $t 方法调用翻译内容，并传递插值参数：
      <template>
  <div>{{ $t('welcome', { name: '张三' }) }}</div>
</template>
    • 若直接使用 {{ welcome }} 而未调用 $t，插值不会被解析。

  3. 语言包未定义或路径错误

    • 检查语言包中的键名是否与模板中使用的完全一致，例如 welcome 需在 messages 中正确定义。

  4. 未启用响应式更新

    • 若动态切换语言，确保使用 i18n.global.locale 并触发响应式更新（如 Vue 3 的 useI18n）。

  5. HBuilderX 项目配置问题

    • 某些情况下需在 pages.json 中配置语言或检查编译器设置，确保 i18n 依赖已正确引入。

示例代码

// main.js
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: 'zh',
  messages: {
    zh: { greeting: '你好, {user}!' },
    en: { greeting: 'Hello, {user}!' }
  }
})

export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return { app }
}

<!-- 页面组件 -->
<template>
  <view>{{ $t('greeting', { user: 'John' }) }}</view>
</template>

排查步骤

  1. 检查控制台是否有错误提示（如未找到键名）。
  2. 确认 vue-i18n 版本与 UniApp 兼容（建议使用最新稳定版）。
  3. 在 onLoad 中打印 this.$t('key') 验证是否返回正确内容。

通过以上调整，通常可解决插值不解析的问题。

回到顶部