vue多语言中英文切换

第一步,下载包
（特别注意：vue-i18n版本需要控制在8）

npm install vue-i18n@8.0.0  --save
或者
yarn add vue-i18n@8.0.0  --save

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

// 所有跟语言相关的代码
import Vue from 'vue'
// 引入i18n核心包
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包

// 引入自定义语言包
import selfEN from './en'
import selfZH from './zh'

// 插件注册
Vue.use(VueI18n)

// 导出实例

const i18n = new VueI18n({
  // zh -> 中文  en -> 因为
  // 指定当前的默认的语言环境
  locale: 'en',
  messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN,
      ...selfEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH,
      ...selfZH
    }
  }
})

// 配置elementUI 转化关系函数
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

第三步，在main.js中挂载 i18n的插件

import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

新建中文文件,src/lang/zh.js

export default {
  navbar: {
    title: '好好学习', // 添加中文环境下title配置
    search: '站内搜索',
    logOut: '退出登录',
    dashboard: '首页',
    github: '项目地址',
    screenfull: '全屏',
    theme: '换肤',
    lang: '多语言',
    error: '错误日志'
  }
}

新建个对应的英文文件src/lang/en.js

export default {
  navbar: {
    title: 'good good study', // 添加英文环境下title配置
    search: 'search',
    logOut: 'Log Out',
    dashboard: 'Dashboard',
    github: 'Github',
    screenfull: 'screenfull',
    theme: 'theme',
    lang: 'i18n',
    error: 'error log'
  }
}

修改头部模板渲染

 <div class="app-breadcrumb">
      <!-- 好好学习 -->
      {{ $t('navbar.title') }}
    </div>

封装多语言组件
src/components/Lang/index.vue

<template>
  <el-dropdown style="margin-right:15px;" @command="handleCommand">
    <div>
      <!-- 切换语言图标 -->
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh">中文</el-dropdown-item>
      <el-dropdown-item command="en">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    handleCommand(type) {
      console.log(type) // zh / en
      // 点击的时候需要切换中英文的环境
      // 核心：修改 locale 配置
      this.$i18n.locale = type
    }
  }
}
</script>

src/components/index.js注册插件

import Lang from './Lang/index.vue'
export default {
  install(Vue) {
    Vue.component('Lang', Lang)
  }
}

引入 main.js

// 注册全局组件
import components from '@/components/index'
Vue.use(components)

在需要的组件中引入全局组件

<!-- 语言包 -->
<lang  />

总结
理解中英文切换原理

优化:发现使用的组件无法进行中英文的切换
两种解决方式
第一种,(推荐)
直接在组件上加上

:key="$i18n.locale"

  <!-- 放置日历组件 -->
          <!--
            bug：这个日历组件并不会随着我们点击修改语言环境让组件自动更新
            解决：当语言环境切换的时候 让该组件强行进行更新
                 1. watch + v-if
                 2. key
  -->
               <!-- 放置日历组件 -->
          <Calendar :key="$i18n.locale" />

第二种侦听事件

 watch: {
    '$i18n.locale': function() {
      this.locale = false
      setTimeout(() => {
        this.locale = true
      }, 0)
    }
  },