vue国际化在js中$t()报错

发布时间 2023-03-29 17:45:08作者: 张亮java

最近在做国际化的时候,发现在.vue里面写国际化语言没有报错,而且也可实现国际化,可是在js中引入$t()写法的时候,报错。

最后花了一个小时解决了,做一个笔记,以供后来学者遇到此类问题,仅供参考。

1,首先,我引入的国际化写法是在main.js中引入了,所以在.vue文件中引入国际化语言的写法,自然不会报错。

原因(我自己的理解):
所有的vue页面都有配置多语言,因为在main.js中已经把多语言i18n引入到new Vue()里面了,所以每个页面就配置了多语言
所以这种写法$t('xxx') 或者 this.$t('xxx') data或method里就可以生效。

但是在js中就不一定生效,因为其他js中,直接就在 const 方法中引入多语言的写法,这个时候,应该是还没引入国际化语言。

解决办法:

 

 

 1. 在国际化配置中加入index.js里面重新配置国际化

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'en-US': {
        ...enLocale,
      },
      'zh-CN': {
        ...zhLocale,
      }
  }
 })
 export default i18n

  2. 在需要翻译国际化的js中引入index.js文件

import i18n from '@/components/lang/index'

把该js中的多语言配置写法由以前的 this.$t('xxx') 改成 i18n.t('xxx')

然后问题就自然解决啦!