uniapp使用vue-i18n开发国际化插值写法不生效怎么解决？

在uniapp中使用vue-i18n进行国际化开发时，按照文档配置了多语言文件并正确引入，但在模板中使用插值写法{{ $t('key') }}时没有生效，页面直接显示{{ $t('key') }}而不是翻译内容。已经检查过i18n实例初始化代码和语言文件路径都正确，请问可能是什么原因导致的？需要如何处理才能让插值语法正常渲染？

2 回复

检查vue-i18n配置是否正确，确保在main.js中正确引入并挂载。检查语言包路径和内容，确保插值语法正确，如$t('message.hello', { name: 'John' })。


在uni-app中使用vue-i18n时，插值写法不生效通常由以下原因导致，可按步骤排查：

1. 检查基础配置 确保在main.js中正确安装和配置：

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

const i18n = createI18n({
  locale: 'zh',
  messages: {
    zh: { greeting: '你好，{name}!' },
    en: { greeting: 'Hello, {name}!' }
  }
})

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

2. 验证模板语法 在Vue 3组合式API环境中：

<template>
  <p>{{ $t('greeting', { name: '张三' }) }}</p>
</template>

选项式API中可使用：

export default {
  computed: {
    greeting() {
      return this.$t('greeting', { name: '张三' })
    }
  }
}

3. 常见问题排查

  • 语言包路径错误：检查messages中的键名与locale设置是否匹配
  • 响应式丢失：在动态切换语言时，确保使用i18n.global.locale = 'en'
  • HBuilderX编译器配置：检查是否开启了Vue3/TypeScript编译
  • 微信小程序兼容性：部分版本需在pages.json中配置"style": { "v8": true }

4. 调试方案 在onLoad中打印检测：

onLoad() {
  console.log(this.$t('greeting', { name: 'test' }))
}

若仍不生效，建议检查vue-i18n版本（推荐^9.0+），并确保uni-app项目基础配置正确。

回到顶部