vue+element使用vue-i18n实现国际化，包括element中组件的国际化

安装vue-i18n
npm install vue-i18n
在main.js同级目录建立如下i18n文件夹，此处只演示中英文，如需其他语言同理新增相应语言js文件夹和element的语言包并配置好即可。

cn.js中文件内容：

//cn.js
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //element组件中文语言包
const cn = {
     
    index:{
     
        'title':'中文',
    },
    ...zhLocale
}
export default cn

en.js中文件内容：

//en.js
import enLocale from 'element-ui/lib/locale/lang/en' //element组件英语语言包
const en = {
     
    index:{
     
        'title':'Chinese',
    },
    ...enLocale
}
export default en

index.js中文件内容：

//langs/index.js
import en from './en'
import cn from './cn'
export default {
     
  en,
  cn
}

i18n.js中文件内容：

//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)

const i18n = new VueI18n({
     
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
 
export default i18n

在main.js中引入并挂载i18n

import i18n from './i18n/i18n'
new Vue({
     
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

在页面中使用

<template>
  <div class="container">
    <el-dropdown trigger="click" @command="switchLang">
      <p> 切换语言 <i class="el-icon-arrow-down el-icon--right"></i></p>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item of langOptions" :key="item.value" :command="item.value">
          {
     {
      item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <p> {
     {
      $t('index.title') }} </p>
  </div>
</template>
export default {
     
  name: 'Login',
  computed:{
     //定义在data里面的数据切换语言内容不变，写到computed里来},
  data() {
     
    return {
     
      lang: "en",
      langOptions: [
        {
      label: "中文", value: "cn" },
        {
      label: "English", value: "en" },
      ]
    }
  },
  methods: {
     
   switchLang(lang) {
     
      window.localStorage.lang = lang;
      this.$i18n.locale = lang;
    }
  }
}
</script>