欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目:Cannot read property '_t' of null报错

程序员文章站 2022-06-07 13:16:58
...

    在使用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'