利用vue-i18n實現多語言切換

在vue項目中利用vue-i18n，咱們能夠實現多語言的切換，能夠輕鬆搞定大部分的需求，包括中英文切換，以及詞條的變動。

vue-i18n基本的使用方法

1、安裝vue-i18n

　　npm install vue-i18n --save

2、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、模板中使用詞條

　　3.一、普通詞條

　　插值表達式中向$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
4、語言切換

 

 

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