美文网首页it编程
Element-ui配合vue-i18n实现组件国际化

Element-ui配合vue-i18n实现组件国际化

作者: ShanksZeng | 来源:发表于2020-04-08 11:32 被阅读0次

element-ui@2.12.0 、vue-i18n@8.x

vue-i18n的使用请参考https://www.jianshu.com/p/cb237fc600e4

将element-ui语言包导入i18n语言包中(此处只使用中英文版)

【lang/index.js】

import Vue from "vue"
import VueI18n from "vue-i18n"
import LangZh from "./language_packs/zh"  //自定义中文语言包
import LangEn from "./language_packs/en"  //自定义英文语言包
import enLocale from 'element-ui/lib/locale/lang/en'        //element-ui英文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'     //element-ui中文语言包

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: localStorage.getItem('locale') || 'zh-CN',
    messages: {
        "zh-CN": {
            ...LangZh,
            ...zhLocale
        },
        "en-US": {
            ...LangEn,
            ...enLocale
        }
    }
})

export default i18n

将i18n扩展到Element-ui

【main.js】

import Vue from 'vue'
import Element from 'element-ui'
import i18n from '@/lang'

Vue.use(Element, {
    i18n: (key, value) => i18n.t(key, value)
})

window.$vm = new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app');

完成

element-ui时期日期选择组件
element-ui分页组件

相关文章

网友评论

    本文标题:Element-ui配合vue-i18n实现组件国际化

    本文链接:https://www.haomeiwen.com/subject/xfwzphtx.html