iview 如何兼容最新的 vue-i18n

最新的 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)