ElementUI配合Vue-I18n实现多语言切换

安装

npm i vue-i18n element-ui

引入

https://element.eleme.cn/#/zh-CN/component/i18n

src目录下新建lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包

Vue.use(VueI18n)

const messages = {
  en: {
    message: 'hello',
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    message: '你好',
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}

export default new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

main.js

···
// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

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

使用

当我们全局注册i18n的时候，每个组件都会拥有一个$t的方法， $t 方法会被挂载到 vue 原型上

它会根据传入的key，自动的去寻找当前语言的文本， $t('title')

<div>
  {{ $t('title') }}
  <span>{{ $t('hello') }}</span>
</div>

语言切换

this.$i18n.locale = 'en'

Vue I18n https://kazupon.github.io/vue-i18n/zh/