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