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的简单用法介绍，更多应用推荐查看文档，毕竟文档才是最好的一手资料。