Vue项目基于i18n实现多语言的切换

1.安装国际化的包

npm i vue-i18n@8.22.2

2.创建一个多语言的实例化文件

• src/lang/index.js

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 // 将饿了么的中文语言包引入
    }
  }
})

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

import i18n from '@/lang'
// 设置element为当前的语言
Vue.use(ElementUI, {
    //i18n根据当前locale属性去寻找对应的显示内容
    //去对应的语言包里寻找对应的内容
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

4.引入自定义语言包

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
    }
  }
})

5.左侧导航菜单中应用

当我们全局注册i18n的时候，每个组件都会拥有一个$t的方法，它会根据传入的key，自动的去寻找当前语言的文本，我们可以将左侧菜单变成多语言展示文本

需要给每一个路由模块中对应的默认子路由添加name属性

• 左侧导航栏文件下 layout/components/SidebarItem.vue

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

6.封装切换多语言组件

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

7.全局注册组件

import LangSelect from './lang'

Vue.component('LangSelect', LangSelect)

8.组件的使用

  <lang-select  />