国际化|多国语言方案 Vue I18n 【Vue2版】

---

Vue3版本移步这里: Vue I18n-Vue3版

---

【1】Docs 文档地址

文档: Vue I18n-Vue2版

---

【2】Installation

文档: Vue I18n Installation

---

NPM:

npm install vue-i18n@8

---

When using with a module system, you must explicitly install the vue-i18n via Vue.use() :

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

---

【3】Getting started

文档: Vue I18n Getting started

---

3.1 HTML

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

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

---

3.2 JavaScript

./en.js

module.exports = {
    message: {
      hello: 'hello world'
    }
  }

./ja.js

module.exports = {
    message: {
      hello: 'こんにちは、世界'
    }
  }

main.js

// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import  en from './en.js';
import  ja from './ja.js';

Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
  en,
  ja
}

// 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({ el:'#app', i18n }).$mount('#app')

// Now the app has started!

Output the following:

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