Vue2+Vuetify集成vue-i18n v9报错：$t未定义，求解决

核心问题 #

你使用的vue-i18n v9.1.0是为Vue 3设计的版本，而当前项目基于Vue 2（搭配Vuetify v2.3.13），两者API不兼容，导致$t方法无法被Vue实例识别，从而抛出错误。

解决步骤 #

1. 安装Vue 2兼容的vue-i18n版本 #

卸载当前不兼容的版本，安装专门适配Vue 2的vue-i18n v8.x分支：

npm uninstall vue-i18n
npm install vue-i18n@8.x --save

2. 修改main.js中的i18n配置 #

vue-i18n v8的用法与v9不同，需要先注册Vue插件再创建实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import './plugins'
import store from './store'
import { sync } from 'vuex-router-sync'

Vue.config.productionTip = false

// 替换原有的createI18n导入
import VueI18n from 'vue-i18n'
import en from "./locales/en.json";
import pt from "./locales/pt.json";

// 先将插件注册到Vue
Vue.use(VueI18n)

sync(store, router)

// 创建i18n实例
const i18n = new VueI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: { pt, en },
});

new Vue({
  router,
  vuetify,
  store,
  i18n,
  render: h => h(App),
}).$mount('#app')

3. 完善组件的语言切换逻辑 #

组件已有语言选择下拉框，但缺少切换locale的逻辑，添加监听实现实时切换：

<template>
  <h2>{{ $t('title.config') }}</h2>
  <div>
    <select v-model="lang">
      <option value="en">English</option>
      <option value="pt">Portuguese</option>
    </select>
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  data: () => ({
    lang: "en"
  }),
  watch: {
    // 监听语言选择变化，同步更新i18n的locale
    lang(newLang) {
      this.$i18n.locale = newLang
    }
  },
  mounted() {
    // 初始化时同步下拉框值与当前i18n语言
    this.lang = this.$i18n.locale
  }
}
</script>

验证 #

完成上述修改后，运行项目即可看到：$t('title.config')会正确渲染对应语言文本，切换下拉框选项也会实时更新页面语言。

内容的提问来源于stack exchange，提问作者DamTan