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

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

---

【1】Docs 文档地址

文档: Vue I18n-Vue3版

---

【2】Installation

文档: Vue I18n Installation

npm install vue-i18n@9

---

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

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

---

【3】Getting started

文档: Vue I18n Getting started

---

3.1 HTML:

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></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

// 1. Ready translated locale messages
// The structure of the locale message is the hierarchical object structure with each locale as the top property
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import  en from './en.js';
import  ja from './ja.js';

const messages = {
 	en,
 	ja
}
// 2. Create i18n instance with options
const i18n = VueI18n.createI18n({
  locale: 'ja', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages, // set locale messages
  // If you need to specify other options, you can set other options
  // ...
})


// 3. Create a vue root instance
const app = Vue.createApp({
  // set something options
  // ...
})

// 4. Install i18n instance to make the whole app i18n-aware
app.use(i18n)

// 5. Mount
app.mount('#app')

// Now the app has started!

---

Output the following:

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