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