在angular中有ngx-translate解决i18n的需求，vue也具备这样的能力，利用vue-i18n，我们可以实现多语言的切换，可以轻松搞定大部分的需求，包括中英文切换，以及词条的变更。词条变更在基线版本真的是经常会遇到的，本人深有体会。不扯淡了，说一下vue-i18n基本的使用方法吧。

安装vue-i18n

npm install vue-i18n --save

main.js中引用

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
	locale: 'zh',
	messages: {
		'zh': require('../static/lang/zh'),
		'en': require('../static/lang/en')
	}
})

new Vue({
    el: '#app',
    router,
    store,
    i18n,
    components: { App },
    template: '<App/>'
  })

当然，我们还要新建两个词条文件static/lang/zh.js和static/lang/en.js

// zh.js
module.exports = {
    helloworld: '你好，世界',
    helloman: '你好，{name}',
    iphones: '苹果5 | 苹果6 | 苹果7'
}

// en.js
module.exports = {
    helloworld: 'hello world',
    helloman: 'hello {name}',
    iphones: 'iphone5 | iphone6 | iphone7'
}

模板中使用词条

普通词条

插值表达式中向$t方法传入词条的key值就可以了，是不是超级简单

<div>普通文本：{{$t('helloworld')}}</div>

带参数词条

带参数词条也有几种写法，分别有命名式，列表式，ruby on rail式。

命名式

在词条中指定命名参数，参数由花括号包裹，如：

// 定义词条
helloman: 'hello {name}'

模板引用词条时，$t方法可以接收传入两个参数，第一个入参为词条key值，第二个入参是词条参数的key-value键值对。

// 引用词条
<div>{{$t('helloman', {name: 'Tom'})}}</div>

列表式

列表式其实与数组的概念一致。词条定义时，通过数组下标鉴别接收的参数。

// 定义词条
helloman: 'hello {0}'

模板中，则将对象改由数组传入

// 引用词条
<div>{{$t('helloman', [‘Tom’])}}</div>
// 还可以这样，用array-like object的形式传入。
<div>{{$t('helloman', {'0': 'Tom'})}}</div>

ruby on rails i18n format

与命名式方法是类似的，定义词条略有不同

// 定义词条
helloman: 'hello %{name}'

而模板上引用词条的方式是一样的，用key-value的方式传入。

多元化

一个词条的key值可以对应多个value信息，此时可以通过vue-i18n的管道pipe来实现。

例如：

iphones: '{n} iphone5 | iphone6 | iphone7'

这里定义了三个value，第一个value还是带参数的。

在模板上的调用方式也有了不同，需要用$tc方法来引用词条。

<div>Pluralization：{{$tc('iphones', 0, {n: '3台'})}}</div>
// 输出 Pluralization：3台 iphone5
<div>Pluralization：{{$tc('iphones', 1)}}</div>
// 输出 Pluralization：iphone6

语言切换

基本用法

完成了词条到界面上的渲染，我们还需要做到语言上的实时切换。我们在new VueI18n时传入了locale的值，作为初始化指定的语言，而切换语言也很简单，只要改变其值就好。

// 切换成英文
this.$i18n.locale = 'en'

判断浏览器语言和保存用户设置

一个常见的需求是：网站语言默认以浏览器语言为准，当用户进行了主动修改时，以用户的个性化选择为优先。

其实实现起来也不是那么难。且看：

获取浏览器语言

首先，我们获取浏览器语言

const NavigatorLang = (navigator.language || navigator.userLanguage).substr(0, 2)

利用vuex管理语言

我们利用vuex来保存语言。当用户未做选择时，存储的即是浏览器语言；当用户选择后，我会将所选语言存在localStorage，同时通过commit更新state的状态。

// vuex配置
const store = new Vuex.Store({
  state: {
    currentLang: localStorage.getItem('UserLang') || NavigatorLang
  },
  mutations: {
    updateLang(state, value) {
      state.currentLang = value
      localStorage.setItem('UserLang', state.currentLang)
    }
  }
})

完成state及mutations的相关设置后，我们接着在 new VueI18n 时传入存在vuex中的语言。

const i18n = new VueI18n({
  locale: store.state.currentLang,
  messages: {
    'zh': require('../static/lang/zh'),
    'en': require('../static/lang/en')
  }
})

最后 new Vue() 时传入i18n即可。

在这里插入图片描述

利用vue-i18n实现多语言切换