在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\'