vue2/element项目多语言（插件i8n）

引入vue-i8n和语言包

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'js-cookie'
import elementZh from 'element-ui/lib/locale/lang/zh-CN'
import elementEN from 'element-ui/lib/locale/lang/en'

import zh from './zh'
import en from './en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: Cookie.get('language') || 'zh',  //切换locale的值就可以切换语言了，当locale为 'zh' 时，t(key)和$t(key)函数就会根据传入的key去 message中 zh 指定的语言包中找到key对应的值，key值支持带  . 号的字符串
  messages: {
    en: {
      ...elementEN,
      ...en
    },
    zh: {
      ...elementZh,
      ...zh
    }
  }
})

挂载vue-i8n和引入elementui

import i18n from '@/lang'

//注册elementUI的组件，并设置element为当前的语言
Vue.use(ElementUI, {
   i18n: (key, value) => i18n.t(key, value)  //当切换 locale 的时候，t()函数会根据传入的key值去locale指定的语言包中找响应的值
  }
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

在自定义页面组织结构应用

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

    <div>{{ $t('route.dashboard') }}</div>  // 如果当前 locale的值是 'zh',则显示首页，如果当前 locale的值是 'en',则显示Dashboard；
    <item :title="$t('route.users')"/>  // $t()也可以用在 标签属性中
	
//en.js 语言包中导出的语言包内容
export default {
  route: {
    dashboard: 'Dashboard',
    manage: 'manage',
    users: 'users',
    menus: 'menus'}
    }

//zh.js 语言包中导出的语言包内容
export default {
  route: {
    dashboard: '首页',
    manage: '后台管理',
    users: '用户管理',
    menus: '菜单管理',
    logs: '日志管理',
    example: '示例',
    table: '数据列表'
	}
}

切换组件

  methods: {
    changeLanguage(type) {
      //    设置的类型  先写入到cookie
      Cookie.set('language', type) // 写入cookie缓存
      // 改变当前的多语言
      this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
      this.$message.success('切换多语言成功')
    }
  }