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

Question

我正在尝试实现 vue-i18n Vue-i18n Github，但出现错误：

vue.js:597 [Vue warn]: Property or method "$t" is not defined

我的 vuejs 2 应用程序运行良好，直到我添加了 getting starded 代码，我哪里错了？提前致谢

<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>

Answer 1

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

您的第一个实例未指定 i18n。

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

<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>
  // 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
  const app = new Vue({
    el: '#app',
    i18n, // this is equivalent to `i18n: i18n,` (without quotes, naturally)
    data: {
      products: [
        'Boots',
      ]
    },
  })
  // Now the app has started!
</script>