首页 前端知识 Must be called at the top of a `setup` function (at vue-i18n.js?v=e5cb6efe:268:17)

Must be called at the top of a `setup` function (at vue-i18n.js?v=e5cb6efe:268:17)

2024-06-18 23:06:50 前端知识 前端哥 64 749 我要收藏

直接在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函数了——

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12725.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!