i18n国际化

• 安装i18n的插件

 $ npm i vue-i18n | yarn add vue-i18n

• 需要单独一个多语言的实例化文件 src/lang/index.js

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n()

• 在main.js中引入i18n

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

• 实现elementUI多语言，给src/lang/index.js中的new VueI18n添加配置项，用Cookie来持久化当前语言

import Vue from 'vue' // 引入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' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH // 将饿了么的中文语言包引入
    }
  }
})

• 在main.js中对挂载 i18n的插件，并设置element为当前的语言

// 设置element为当前的语言
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

此时，element已经变成了zh，也就是中文，但是我们常规的内容怎么根据当前语言类型显示？怎么实现左侧路由菜单的语言变化呢？

这个时候需要去自定义项目所需要的语言包，这边我定义了两个语言包，一个英文的，一个中文的，并将语言包的js文件引入到我们的src/lang文件夹中：src/lang/zh.js , src/lang/en.js

• 在src/lang/index.js中同样引入该语言包

import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    }
  }
})

• 当我们全局注册i18n的时候，每个组件都会拥有一个$t的方法，它会根据传入的key，自动的去寻找当前语言的文本，我们可以将左侧菜单变成多语言展示文本，在 **layout/components/SidebarItem.vue**文件中进行多语言设置

<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t('route.'+onlyOneChild.name)" />

注意：这里可能会有人疑惑，为什么要写成 'route.'+onlyOneChild.name？因为我的语言包里，所有的语言是被route对象包裹的，$t是支持对象.(点)属性名的写法的，后面加onlyOneChild.name，是因为我的语言包内与菜单对应的属性，他的key值是和我路由名对应的，这样就实现了根据路由名，显示他们对应的语言

• 现在，我们已经完成了多语言的接入，最后要实现语言的切换，这里我单独封装了一个切换多语言的组件**src/components/lang/index.vue

<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.set('language', lang) // 切换多语言
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>

1、这里再次引入Cookie，为语言包设置持久化语言，实现src/lang/index.js里locale配置读取Cookie里的语言包，保证刷新页面，语言不变

2、因为我们在vue的实例对象上挂着了i18n插件，所有我们在任意组件中都可以通过$i18n访问到这个插件，已经它的配置项，通过更改locale配置实现路由菜单的语言切换

• 最后将切换多语言的组件放置到项目需要处即可