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

 

 

  

 

上一篇:Spring Boot 国际化


下一篇:LeetCode-203-移除链表元素