直接在ts文件中引入vue-i18n中的t函数会报错Must be called at the top of a setup
function (at vue-i18n.js?v=e5cb6efe:268:17)
如图:
错误原因:这个错误提示表明在Vue.js的i18n插件中,i18n实例的某个方法应该在setup函数的顶部调用,但是它却在其他地方被调用了。
解决方法:
1.新建一个language文件夹
2.新建index.ts文件
3创建i18n实例并导出
4在main.ts中使用
import { createI18n } from 'vue-i18n'; import { getLanguage } from '@/utils'; import language from './index.json'; const i18n = createI18n({ locale: getLanguage(), // 默认语言 fallbackLocale: 'en-US', // 当未提供所需语言的翻译时,将回退到的语言 messages: language,//此时的语言类型,例如:Chinese,Eglish等 legacy: false, // 让 setup 函数可以通过 t 访问 globalInjection: true, // 让 template 可以像 vue2 那样使用 $t 来访问 }); export default i18n
复制
//在mian.ts中 import i18n from '@/language/index' const app = createApp(App); app.use(i18n);
复制
在需要使用vue-i18n的ts文件中这样引入:
import i18n from "@/language/index"; const { t } = i18n.global;
复制
然后就可以尽情的使用t函数了——