vue国际化插件

1、安装

　　

$ npm install vue-i18n

2、引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-US',    // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'),   // 中文语言包
    'en-US': require('./common/lang/en')    // 英文语言包
  }
})

3、配置

en.js

module.exports = {
  navList:{
    home: "HOME",
    task: "TASK CENTER",
    login: "LOG IN",
    switch: "EN"
  }
}

zh.js
module.exports = {
  navList:{
    home: "首页",
    task: "任务中心",
    login: "登录",
    switch: "中文"
  }
}

4、使用

{{$t('navList.home')}}

 

5、点击切换

export default {
  name: 'index',
  data(){
    return {
      headerlogo,
      cMinH: 'auto',
      obj:{
        "zh-CN":1,
        "en-US":2
      }
    }
  },
  created(){
    let langSet = localStorage.getItem('langSet');
    console.log('=>',langSet)
    if (langSet in this.obj)
      this.$i18n.locale = langSet

    console.log(document.documentElement.clientHeight)
    this.cMinH = document.documentElement.clientHeight - 224 + 'px'
  },
  methods: {
    clickNav(url) {
      this.$router.push(url)
    },
    switchLang(){
      console.log('switch',this.$i18n.locale=='zh-CN')
      if (this.$i18n.locale=='zh-CN')
      {
        this.$i18n.locale='en-US'
        localStorage.setItem("langSet","en-US")
      }
      else
      {
        this.$i18n.locale='zh-CN'
        localStorage.setItem("langSet","zh-CN")
      }
    }
  }
}