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

最新推荐文章于 2025-11-11 17:37:22 发布

原创最新推荐文章于 2025-11-11 17:37:22 发布 · 5.1k 阅读

CC 4.0 BY-SA版权

本文详细解析了在Vue项目中使用vue-i18n插件进行多语言国际化配置时遇到的Cannotreadproperty'_t'ofnull错误，并提供了解决方案。通过调整多语言配置和页面加载顺序，确保在页面跳转前完成多语言资源的加载。

在使用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'),注意修改后不在需要$符号!!!