Nuxt I18n 本质上是对 Vue I18n 的封装，而 Vue I18n 是支持 TypeScript 类型推导的，详见 TypeScript Support。很可惜 Nuxt I18n 并不能在配置文件中传入类型。
// app/locales/i18n.config.ts
export type MessageSchema = typeof en; // 🥲 没地方传入啊？？？
export default defineI18nConfig(() => ({
legacy: false,
fallbackLocale: 'en',
messages: {
en: en,
'zh-CN': zhCn,
},
}));
这导致我们在调用时无法获知键值。解决方案也很简单，即对 useI118n 调用层进行进一步封装，后续所有的 t 方法都使用此 composable。
// app/composables/useEsayI18n.ts
import { useI18n } from 'vue-i18n';
import type { MessageSchema } from '~/locales/i18n.config';
export default function () {
const i18nFns = useI18n<{ message: MessageSchema }>(); // ✅ 在这里传入类型
return { ...i18nFns };
}
Before:
After:
