在使用vue开发一个windows app项目时,遇到Cannot read property '_t' of null的报错,报错的地方是使用this.$message接口在app界面弹出提示框,由于采用中英文的语言国际化,出错之前使用vue.$t("xxx.xx")来获取中英文的提示语(该使用方法可以参考我之前引用的另一篇文章《vue-i18n 切换中英文》),用得挺好的,后台不知道啥原因就提示该种错误,一直也没有发现原因。
查阅资料后怀疑如下:
vue项目中页面路由快速跳转时,vue-18n有一定概率报错Cannot read property '_t' of null。
来回跳转的多个页面都有配置多语言,如html里的{{$t("xxx.xxx")}},data或method里的vue.$t('xxx.xxx')或者this
.$t('xxx.xxx')
。
在第一页面跳转第二时,页面1的多语言还没加载完成但已经跳转到页面2了,就找不到页面1里的this指向了。
解决办法:
多语言配置文件(我的项目是src/renderer下的i18n/i18n.js)
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const messages = {
en: Object.assign(en, enLocale),
zh: Object.assign(zh, zhLocale)
}
console.log(messages.zh)
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh',
messages
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
export default i18n
配置多语言的单页面里单独引入i18n,代码如下:
页面里 的this.$t('xxx.xxx')或者vue.$t("xxx.xxx") 改成 i18n.t('xxx'),注意修改后不在需要$符号!!!
import i18n from '@/i18n/i18n'