利用vue-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: '你好，世界', helloname: '你好，{name}'}

// en.js module.exports = { helloworld: 'hello world', helloname: 'hello {name}'}

三、模板中使用词条

3.1、普通词条

插值表达式中向$t方法传入词条的key值就可以了，例如：<div>普通文本：{{$t('helloworld')}}</div>

3.2带参数词条

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

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

3.3多元化

// 定义词条iphones: '{n} iphone5 | iphone6 | iphone7'

//引用词条

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

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