liaooo

标签： ElementUI

  • 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/