Javascript vue.js:597[vue warn]：未定义属性或方法“$t”

我正在尝试实现vue-i18n，但出现了一个错误：

vue.js:597[vue warn]：未定义属性或方法$t

我的vuejs 2应用程序工作正常，直到我添加了入门代码，我错在哪里？提前谢谢

<div id="app">
  <p>{{ $t("message.hello")}}</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      products: [
   'Boots',
  ]
   },
  })
</script>
<script>
 // Ready translated locale messages
 const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
  }

 // Create VueI18n instance with options
  const i18n = new VueI18n({
    locale: 'ja', // set locale
    messages, // set locale messages
  })

  // Create a Vue instance with `i18n` option
  new Vue({ i18n }).$mount('#app')
// Now the app has started!
</script>

您必须在希望Vue-i18n正常工作的任何Vue实例中指定i18n

您拥有的第一个实例没有指定i18n

此外，您有两个Vue实例，它们不能一起工作，所以您可能只需要一个指定了i18n的实例

{{$tmessage.hello}

//已翻译的区域设置消息 常量消息={ 嗯:{ 信息：{ 你好：“你好，世界” } }, ja:{ 信息：{ 你好：'こんにちは、世界' } } } //使用选项创建VueI18n实例 常数i18n=新VueI18n{ 语言环境：“ja”，//设置语言环境 消息，//设置区域设置消息 } //使用'i18n'选项创建Vue实例 const app=新的Vue{ el:“应用程序”， i18n，//这相当于'i18n:i18n'，'自然不带引号 数据：{ 产品：[ “靴子”， ] }, } //现在应用程序已经启动！

---

为什么有两个Vue实例，都安装在应用程序上？您可以删除第一个，然后将数据移动到具有翻译的数据。