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