vue-i18n和ElementUI国际化的同时引用

要实现在vue项目中引入vue-i18n和elementUI的国际化功能的结合,需要在main.js中添加以下配置:

import ElementUI from 'element-ui';

import VueI18n from 'vue-i18n'
import LangEn from '../static/lang/en'
import LangZh from '../static/lang/zh'

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

if (JsSrc.indexOf('zh') >= 0) {
    // 假如浏览器语言是中文
    localStorage.setItem("defaultLng", "zh")
} else {
    // 假如浏览器语言是英文
    localStorage.setItem("defaultLng", "en")
}

const i18n = new VueI18n({
    locale: localStorage.getItem("locale") || localStorage.getItem("defaultLng"), // 语言标识
    messages: {
        en: {
            ...LangEn,  // 解构合并两个语言包
            ...enLocale
        },
        zh: {
            ...LangZh,
            ...zhLocale
        }
    }
})
ElementLocale.i18n((key, value) => i18n.t(key, value)) // 在注册Element时设置i18n的处理方法

在引用语言包的时候除了可以用解构合并语言包,还可以用对象连接方法进行合并。

例如 :en:Object.assign(LangEn,enLocale)

你可能感兴趣的:(vue-i18n和ElementUI国际化的同时引用)