Element-ui配合vue-i18n实现组件国际化
2020-04-08 本文已影响0人
ShanksZeng
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');
完成

