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

[email protected] 、[email protected]

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分页组件