第一步,下载包
（特别注意：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) {ponent('Lang', Lang)}}
引入 main.js
// 注册全局组件import components from '@/components/index'Vue.use(components)
在需要的组件中引入全局组件
<!-- 语言包 --><lang />
总结
理解中英文切换原理
优化:发现使用的组件无法进行中英文的切换
两种解决方式
第一种,(推荐)
直接在组件上加上
:key="$i18n.locale"
<!-- 放置日历组件 --><!--bug：这个日历组件并不会随着我们点击修改语言环境让组件自动更新解决：当语言环境切换的时候 让该组件强行进行更新1. watch + v-if2. key--><!-- 放置日历组件 --><Calendar :key="$i18n.locale" />
第二种侦听事件
watch: {'$i18n.locale': function() {this.locale = falsesetTimeout(() => {this.locale = true}, 0)}},
