欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue I18n 使用方法

程序员文章站 2022-05-15 23:47:26
...

官方地址:http://kazupon.github.io/vue-i18n/zh/started.html#javascript

实例使用:

https://blog.csdn.net/weixin_41164499/article/details/89337134?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-2.edu_weight

 

官方代码:

HTML

 

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

JavaScript

(main.js)

(到时候会使用一个language.js 文件把messsages独立出来)

// 如果使用模块系统 (例如通过 vue-cli),则需要导入 Vue 和 VueI18n ,然后调用 Vue.use(VueI18n)。
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 准备翻译的语言环境信息
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'ja', // 设置地区
  messages, // 设置地区信息
})


// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')