vue2 elment + vue-i18n 实现多语言 的问题，注意vue2是使用的8.27，而最新的版本是大于这个的，vue3支持的

问题描述：

在vue使用 vue-i18n 的时候发现支付直接安装 npm i vue-i18n 的时候报错，因为他默认安装的是最新的版本，所有适合vue3不适合vue2的项目。

解决：

第一步：

npm i vue-i18n@8.27.0 -D

 npm install --save js-cookie

第二步：引入vue-i8n和语言包，在工程下 创建src/lang/index.js 放入如下代码：

import Vue from 'vue'

import VueI18n from 'vue-i18n' // 引入国际化的包

import Cookie from 'js-cookie' // 引入cookie包

import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包

import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包

import en from "@/lang/en.js"

import zh from "@/lang/zh.js"

Vue.use(VueI18n) // 全局注册国际化包

export default new VueI18n({

  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文

  messages: {

    en: {

      ...en, // 将en.js语言包引入

      ...elementEN, // 将饿了么的英文语言包引入

    },

    zh: {

      ...zh, // 加载zh.js语言包引入

      ...elementZH, // 将饿了么的中文语言包引入

    },

  }

})

第三步：在vue项目目录下的main.js里面挂载

import i18n from '@/lang'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {
    i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

 第四步：en.js文件里面配置英文

export default {
  route: {
    dashboard: 'Dashboard',
    manage: 'manage',
    users: 'users',
    menus: 'menus'},
    language:{
        language:"language",
        zh:"china",
        en:"english"
    }
}

第五步：zh.js文件里面配置中文

//zh.js 语言包中导出的语言包内容
export default {
  route: {
    dashboard: '首页',
    manage: '后台管理',
    users: '用户管理',
    menus: '菜单管理',
    logs: '日志管理',
    example: '示例',
    table: '数据列表'
	},
     language:{
        language:"语言",
        zh:"中国",
        en:"英国"
    }
}

第六步：设置使用与切换语言

<el-submenu index="5">
    <template slot="title">{{$t('route.language')}}</template>
    <el-menu-item index="5-1" @click="changeZh">{{$t('route.zh')}}</el-menu-item>
    <el-menu-item index="5-2" @click="changeEng">{{$t('route.en')}}</el-menu-item>
</el-submenu>

 methods: {
    changeLanguage(type) {
      //    设置的类型  先写入到cookie
      Cookie.set('language', type) // 写入cookie缓存
      // 改变当前的多语言
      this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
      this.$message.success('切换多语言成功')
    }
  }

整个流程完了。感觉新手小白还是不好理解。这边参考的这个文章完善的：vue2/element项目多语言（插件i8n） - Fen~ - 博客园