开始

说明

我们将在指南中的代码示例中使用 ES2015开始 - 图1 语法。

HTML

  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  2. <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
  4. <div id="app">
  5.   <p>{{ $t("message.hello") }}</p>
  6. </div>

JavaScript

  1. // 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
  2. // import Vue from 'vue'
  3. // import VueI18n from 'vue-i18n'
  4. //
  5. // Vue.use(VueI18n)
  7. // 准备翻译的语言环境信息
  8. const messages = {
  9.   en: {
  10.     message: {
  11.       hello: 'hello world'
  12.     }
  13.   },
  14.   ja: {
  15.     message: {
  16.       hello: 'こんにちは、世界'
  17.     }
  18.   }
  19. }
  21. // 通过选项创建 VueI18n 实例
  22. const i18n = new VueI18n({
  23.   locale: 'ja', // 设置地区
  24.   messages, // 设置地区信息
  25. })
  28. // 通过 `i18n` 选项创建 Vue 实例
  29. new Vue({ i18n }).$mount('#app')
  31. // 现在应用程序已经准备好了！

输出如下：

  1. <div id="#app">
  2.   <p>こんにちは、世界</p>
  3. </div>