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

Amber.Li

已于 2023-01-04 14:10:27 修改

阅读量509

点赞数

分类专栏：国际化 | 多国语言文章标签： vue.js 前端 javascript

于 2023-01-04 13:07:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43101443/article/details/128544937

版权

国际化 | 多国语言专栏收录该内容

2 篇文章

订阅专栏

VueI18n是Vue.js应用的国际化插件，支持Vue2和Vue3。用户可以通过NPM安装并使用Vue.use()方法引入。在HTML和JavaScript中设置后，可以轻松切换不同语言环境，如英文和日文，显示对应的语言内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

国际化|多国语言方案 Vue I18n

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>