美文网首页
iview 如何兼容最新的 vue-i18n

iview 如何兼容最新的 vue-i18n

作者: littleFen | 来源:发表于2017-10-12 14:18 被阅读0次

    最新的 iview 已经支持 vue-i18n 6.0 以上了,无需往下看了!
    先贴上如何使用的源码

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import iView from 'iview'
    
    Vue.use(VueI18n)
    Vue.use(iview)
    // 多语言配置
    const languages = ['zh-CN', 'en-US'] // 和iview 的命名保持一致,这里使用了中文版和英文版
    
    const mergeLang = languages => {
      const ret = {}
      languages.forEach(lang => {
        // require 形式,默认会把 default 看成是对象的一个 key
        const kagouLocale = require('iview/dist/locale/' + lang).default // 这里加载 iview 中的语言包
        const locale = require('./lang/' + lang).default // 加载自己的语言包
        ret[lang] = Object.assign(locale, kagouLocale) // 两个语言包合并
      })
      return ret
    }
    
    const messages = mergeLang(languages)
    console.log(Vue.config)
    const i18n = new VueI18n({
      locale: 'en-US', // 默认使用的语言
      messages
    })
    
    // 按照官方的文档是要把上面的 i18n 实例在 new Vue 的时候传进去,这样做有个弊端,iview中有些组件会再实例化新的 vue,如 datepicker 中的下拉出来的日历选择,这时候新的 vue 实例中就没有 i18n 的方法
    // 所以改为下面的方案
    Vue.prototype._i18n = i18n
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    

    其次需要改动 iview 的源码了

    // 来自 iview 中 src/locale/index.js
    let i18nHandler = function() {
        const vuei18n = Object.getPrototypeOf(this || Vue).$t; // 取到 vue-i18n 生成的方法
        if (typeof vuei18n === 'function') { // 如果是function 类型,说明 vue-i18n 被执行了
           // 注释掉这一段
           // if (!merged) {
           //      merged = true;
           //      Vue.locale(  // 这里在调用 locale 方法,低版本 vue-i18n (5.x) 会挂载到 Vue 上,最新版 (7.x) 的已经移除了这个方法,所以导致新版的无法使用
           //          Vue.config.lang,
           //          deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
           //      );
           //  }
            return vuei18n.apply(this, arguments);
        }
    };
    

    ok ,这样就大功告成了,由于我们采用的 iview 版本为自己改造过的版本,所以改源码比较方便,如果有直接使用 iview 模块的那就只能去 node_modules 目录下去改生成后的源码了

    相关文章

      网友评论

          本文标题:iview 如何兼容最新的 vue-i18n

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