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)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容