Vue.js 2集成vue-i18n报错$t未定义，求问题排查方案

这个报错很常见，大概率是你漏了vue-i18n的核心初始化和挂载步骤，导致Vue实例没有注入$t方法。咱们一步步来修正：

问题根源 #

你已经引入了Vue和Vue-i18n的CDN，但没有完成语言资源配置、创建i18n实例并挂载到Vue实例的关键步骤，所以模板里的$t无法被识别。

完整的正确实现代码 #

替换你现有的script部分，完整代码如下：

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script>
// 1. 定义你的语言翻译资源
const messages = {
  en: {
    message: {
      hello: 'Hello World!'
    }
  },
  zh: {
    message: {
      hello: '你好，世界！'
    }
  }
}

// 2. 创建VueI18n实例，配置默认语言和翻译资源
const i18n = new VueI18n({
  locale: 'en', // 设置当前使用的语言
  messages // 传入上面定义的翻译资源
})

// 3. 创建Vue实例时，把i18n实例挂载进去
const app = new Vue({
  el: '#app',
  i18n // 这一步是让$t方法全局可用的关键！
})
</script>

关键注意点 #

• 必须挂载i18n到Vue实例：如果你的Vue实例里没有i18n选项，Vue就不会把$t注入到组件实例中，模板自然找不到这个方法。
• 语言资源结构要匹配：确保你在$t里写的路径（比如message.hello）和你定义的messages对象结构完全对应，否则会返回键名本身（比如显示message.hello而不是翻译内容）。
• CDN版本的小细节：虽然Vue-i18n的CDN版本会自动调用Vue.use(VueI18n)，但如果是本地npm安装的版本，一定要记得先执行Vue.use(VueI18n)再创建实例。

这样修改后，你的$t方法就能正常工作了，模板会正确渲染出对应的翻译内容~

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