gogoWebsite

vue project: Cannot read property '_t' of null report an error

Updated to 2 days ago

When using vue to develop a Windows app project, I encountered an error report from Cannot read property '_t' of null. The error report is to use this.$message interface to pop up a prompt box on the app interface. Since the language of Chinese and English is internationalized, vue.$t("") is used to obtain Chinese and English prompts before the error occurs (this method can be used to refer to another article I quoted earlier.vue-i18n toggle in Chinese and English》), it is used very well. If you don’t know the reason in the background, you will prompt this error, and you have never found the reason.

After reviewing the information, I suspect it is as follows:

When the page route in the vue project is quickly redirected, vue-18n has a certain probability of reporting an error Cannot read property '_t' of null.
Multiple pages that jump back and forth have multiple languages ​​configured, such as { in html{$t("")}}, vue in data or method.$t('') or this.$t('')
When the first page jumps to the second, the multi-language of page 1 has not been loaded but has been redirected to page 2, so this pointer in page 1 cannot be found.

Solution:
Multilingual configuration file (My project is i18n/ under src/renderer)

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'


 (VueI18n)

 const messages = {
   en: (en, enLocale),
   zh: (zh, zhLocale)
 }

 ()

 const i18n = new VueI18n({
   locale: ('locale') || 'zh',
   messages
 })


 locale.i18n((key, value) => (key, value)) //In order to implement multi-language switching of element plug-in

 export default i18n

I18n is introduced separately in a single page with multi-language configuration, and the code is as follows:
Change this.$t('') or vue.$t("") on the page to ('xxx'),Note that the $ symbol is not required after modification!!!

import i18n from '@/i18n/i18n'