利用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'