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 目錄下去改生成后的源碼了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容