uniapp 页面$t的使用方法

在uniapp中如何使用$t方法实现页面多语言切换？我在main.js里配置了i18n，但在页面调用this.$t(‘key’)时报错"$t is not defined"，请问正确的使用方法是什么？需要额外引入什么依赖吗？

2 回复

在uniapp页面中，使用$t进行国际化翻译。首先在i18n目录配置语言文件，然后在页面中通过this.$t('key')调用。例如：<text>{{$t('hello')}}</text>或this.$t('welcome')。


在 UniApp 中，$t 是用于国际化的方法，通常与 vue-i18n 库结合使用，实现多语言切换。以下是具体使用方法：

步骤 1：安装和配置 vue-i18n

  1. 安装依赖：

    npm install vue-i18n

  2. 创建语言文件： 在项目中创建 lang 文件夹，并添加语言文件，例如：

    • lang/zh-CN.js（中文）：
      export default {
  welcome: '欢迎使用 UniApp',
  button: '点击按钮'
}
    • lang/en-US.js（英文）：
      export default {
  welcome: 'Welcome to UniApp',
  button: 'Click Button'
}

  3. 配置 main.js：

    import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh-CN'
import enUS from './lang/en-US'

const i18n = createI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

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

步骤 2：在页面中使用 $t

在 Vue 页面或组件中，通过 $t 方法获取对应语言的文本：

<template>
  <view>
    <text>{{ $t('welcome') }}</text>
    <button>{{ $t('button') }}</button>
  </view>
</template>

<script>
export default {
  methods: {
    showMessage() {
      uni.showToast({
        title: this.$t('welcome'),
        icon: 'none'
      })
    }
  }
}
</script>

步骤 3：切换语言

通过修改 locale 实现动态语言切换：

// 在方法中切换语言
changeLanguage(lang) {
  this.$i18n.locale = lang
}

注意事项：

  • 确保 vue-i18n 正确安装和初始化。
  • 语言文件需导出对象，键名保持一致。
  • 在模板或方法中直接使用 $t('key')，无需额外导入。

通过以上步骤，即可在 UniApp 中实现多语言功能。

回到顶部