vue 项目element 结合vue-i18n 多语言切换

Element 兼容 vue-i18n，搭配使用能更方便地实现多语言切换。

1.vue 项目中通过npm 下载vue-i18n： npm install vue-i18n --save-dev
2.创建lang 文件夹，lang 文件夹下分别创建en.js、zh.js、index.js文件夹，

zh.js 存放中文的内容，

export default {
  // 基本检索
  basic: {
    AllFields: '全部字段',
    BasicSearch: '基本检索',
    AdvancedSearch: '高级搜索',
  }
}

en.js 文件中存放于与en.js的翻译字段相对应

export default {
  // 基本检索
  basic: {
    AllFields: 'All Fields',
    BasicSearch: 'Basic Search',
    AdvancedSearch: 'Advanced Search',
  }
}

index.js 中

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang

import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  locale: 'zh', // set locale
  messages // set locale messages
})

export default i18n

在项目的main.js 中

import ElementUI from 'element-ui';
import i18n from '@/assets/lang/index'

Vue.use(ElementUI, {
  size: 'medium',
  i18n: (key, value) => i18n.t(key, value)
});

new Vue({
  el: '#app',
  router,
  components: { App },
  i18n,
  components: {
    App
  },
  template: ''
})

在.vue文件中通过如下方式使用

{{$t('basic.AllFields')}}

在方法中切换语言通过,切换语言

     // 语言切换按钮
     lang(key) { // key 传入‘zh’ 或者‘en’
        this.language = key;
        this.$i18n.locale = key;//
        window.localStorage.setItem("lang", this.language);
   },