要实现在vue项目中引入vue-i18n和elementUI的国际化功能的结合,需要在main.js中添加以下配置:
import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n'
import LangEn from '../static/lang/en'
import LangZh from '../static/lang/zh'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
if (JsSrc.indexOf('zh') >= 0) {
// 假如浏览器语言是中文
localStorage.setItem("defaultLng", "zh")
} else {
// 假如浏览器语言是英文
localStorage.setItem("defaultLng", "en")
}
const i18n = new VueI18n({
locale: localStorage.getItem("locale") || localStorage.getItem("defaultLng"), // 语言标识
messages: {
en: {
...LangEn, // 解构合并两个语言包
...enLocale
},
zh: {
...LangZh,
...zhLocale
}
}
})
ElementLocale.i18n((key, value) => i18n.t(key, value)) // 在注册Element时设置i18n的处理方法
在引用语言包的时候除了可以用解构合并语言包,还可以用对象连接方法进行合并。
例如 :en:Object.assign(LangEn,enLocale)