uniapp i18n app插值如何实现

在UniApp中使用i18n进行国际化时，如何在页面或组件中实现插值功能？例如，动态替换语言包中的占位符变量。官方文档没有详细说明具体用法，尝试过直接绑定数据但未生效。能否提供一个完整的示例代码？

在uniapp中使用i18n插值，可通过$t()函数实现。例如：$t('message.hello', {name: '张三'})，在语言文件中定义："hello": "你好, {name}"。这样就能动态替换{name}为实际值。

songsunli 2楼

在 UniApp 中，使用 vue-i18n 库实现国际化（i18n）时，插值功能允许在翻译文本中动态插入变量。以下是实现步骤和示例：

1. 安装和配置 `vue-i18n`

首先，在项目中安装 vue-i18n（如果尚未安装）：

npm install vue-i18n

在 main.js 中配置：

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

// 定义语言包
const messages = {
  en: {
    greeting: 'Hello, {name}!'
  },
  zh: {
    greeting: '你好，{name}！'
  }
}

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'zh', // 默认语言
  messages
})

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

2. 在模板中使用插值

在 Vue 模板中，通过 $t 方法传递变量：

<template>
  <view>
    <text>{{ $t('greeting', { name: userName }) }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: '张三'
    }
  }
}
</script>

3. 在 JavaScript 中使用插值

在方法或计算属性中，通过 this.$t 实现：

export default {
  methods: {
    showMessage() {
      const message = this.$t('greeting', { name: '李四' })
      console.log(message) // 输出：你好，李四！
    }
  }
}

4. 插值语法说明

在语言包中，使用花括号 {} 定义占位符，如 {name}。
传递变量时，对象键名需与占位符一致。

注意事项

确保变量名与语言包中的占位符匹配。

如果使用 Vue 3 组合式 API，可通过 useI18n 获取 t 方法：

import { useI18n } from 'vue-i18n'
export default {
  setup() {
    const { t } = useI18n()
    return {
      message: t('greeting', { name: '王五' })
    }
  }
}