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

最近在做国际化的时候，发现在.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 Storage from 'vue-ls';
import config from '@/defaultSettings'
import VueI18n from 'vue-i18n'
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
Vue.use(VueI18n);
Vue.use(Storage, config.storageOptions)
 
const i18n = new VueI18n({
  locale: Vue.ls.get("language", "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')

然后问题就自然解决啦！