Nuxt 3中@nuxtjs/i18n的__VLS_ctx.$t类型未知错误求助

以下是无需替换模板中$t即可解决该错误的方案：

1. 修复TypeScript类型声明 #

• 在项目根目录创建types/i18n.d.ts文件，添加内容扩展Vue全局类型：

import type { Composer } from '@nuxtjs/i18n'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $t: Composer['t']
    $i18n: Composer
  }
}

export {}

• 检查tsconfig.json，确保types字段包含@nuxtjs/i18n，示例：

{
  "extends": "./.nuxt/tsconfig.json",
  "types": ["@nuxtjs/i18n"]
}

2. 调整Volar（VLS）配置 #

在.vscode/settings.json中添加配置，强制Volar识别Nuxt全局上下文：

{
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": "enable",
  "vue.intellisense.types": ["@nuxtjs/i18n"]
}

3. 清理各类缓存 #

• 执行npx nuxt clean清除Nuxt缓存
• 删除项目根目录的.nuxt、.output和node_modules/.cache文件夹
• 重启VS Code确保缓存完全刷新

4. 验证Nuxt i18n配置 #

确认nuxt.config.ts中i18n模块配置正确，示例：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    vueI18n: {
      legacy: false,
      locale: 'en',
      messages: {
        en: { /* 英文翻译内容 */ },
        zh: { /* 中文翻译内容 */ }
      }
    }
  }
})

注意确保legacy: false，适配Nuxt3的组合式API模式，避免类型冲突。

内容的提问来源于stack exchange，提问作者Kirill Donenko