2分鐘入門瞭解vue-i18n

參考文檔：https://kazupon.github.io/vue-i18n/en/

寫在前面：近期因爲工做上的變更，接觸的業務涉及到頁面的國際化，因而稍微瞭解了一下vue-i18n。

vue-i18n的應用場景：網站須要支持多語言

安裝（多種方式，只列舉npm下安裝下載，具體可查看文檔中的入門介紹）：npm install --save-dev vue-i18n

使用方法：

一、在項目中引入vue-i8n和vue，並在vue中使用

import Vuei18n from ‘vue-i18n’

import Vue from 'vue'

Vue.use(Vuei18n)

二、配置語言包

const messages = {

        zh: {

            message:{

                   candy:‘糖果’

            }

        }

        en: {

            message:{

                   candy:‘candy’

            }

        }

}

三、實例化vue-i18n（語言包的key值必須爲messages，這裏key和value都是messages因而省略了）

var i18n=new VueI18n({

      locale: ‘zh’, // 設置默認的語言類型

      messages, // 設置語言包

})

四、注入到vue中

var myVue=new Vue({

      i18n,

     .......//（其餘配置）

})

五、在具體的代碼中應用

這裏實現的是一個導航欄，須要根據不一樣語言進行切換語言。在模板中，使用語法糖：{{$t(‘key’)}}，key表明的是語言包中的key值，即message.candy

key值也能夠是變量，以下圖所示，nav.name即便語言包中的key值

六、修改語言類型，經過vue實例咱們能夠直接取得vue-i18n的變量

myVue.$i18n.locale=’en’，便可修改對應en的語言類型。

以上是vue-i18n的簡單用法介紹，更多應用推薦查看文檔，畢竟文檔纔是最好的一手資料。