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