在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即可。