vue2多语言包i8n

1.下包(我是vue2)

yarn add vue-i18n@8.2.1 --save

2.建多语言实例化文件

/* 多语言实例化文件*/
/* 1. 导入VueI18n和Vue  再去main.js中挂载插件*/
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包
// 2.引入cookie工具
import Cookie from 'js-cookie' // 引入cookie包
// 3.引入饿了么你要的对应的语言包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import elementJA from 'element-ui/lib/locale/lang/ja' // 引入饿了么的日文包
// 4. 引入自定义语言包
import customZH from '@/lang/zh'
import customEN from '@/lang/en'
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  // locale决定当前的多语言类型 假设要切换多语言 只需要设置该属性就可以了
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文  // 指的是当前的多语言的类型 随意定义的字符串 中文zh/英文en/日语ja等
  // 上边的意思是现在cookie中找有没有language的语言类型，如果没有则定义为zh中文，当然你也可以写en
  // message指的是当前的语言包（你要做的语言）
  messages: {
    en: {
      // 这里放语言包  elementUI语言包+自定义语言包
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    },
    ja: {
      ...elementJA
    }
  }
})

3.在main.js中挂载插件

import i18n from '@/lang/index'

new Vue({
  i18n
})

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

4.封装多语言组件

<!--封装多语言组件-->
<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 这里必须加一个div -->
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  methods: {
    changeLanguage(lang) {
      // 设置的类型 先写入到cookie中
      Cookie.set('language', lang) // 切换多语言
      // 将当前的多语言类型改成对应的类型
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>