vue中使用vue-i18n实现多语言切换

前言：在vue项目中要使用到语言切换功能，找到一个vue-i18n插件觉得挺好用的
1. 安装

npm install vue-i18n

2. 引入
笔者在main.js中引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh', // 语言标识
  messages: {
    'zh': require('./assets/lang/zh'),
    'en': require('./assets/lang/en')
  }
})

new Vue({
  el: '#app',
  i18n,
  ...
  })

两个js文件的内容demo分别为


3. 使用

在HTML中使用，格式为：{{$t('***')}}

    <div >{{$t('menu.home')}}</div>
    <div >{{$t('content')}}</div>

在js中使用，格式为：this.$t('menu.home')
切换语言，例如点击事件切换:

 change(){
      var lang = this.$i18n.locale;
      if(lang === 'en'){
        this.$i18n.locale = 'zh'
      }else{
        this.$i18n.locale = 'en'
      }
    }