美文网首页
vue-i18n和ElementUI国际化的同时引用

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

作者: 角落里的小草_ | 来源:发表于2019-04-22 17:11 被阅读0次

    要实现在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国际化的同时引用

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