如何在配置了TypeScript的Nuxt项目中使用SweetAlert2并解决类型报错

架构老林

2026-10-1

这个报错是TypeScript无法识别挂载在Vue原型上的$swal方法导致的，你使用的nuxt-sweetalert2包没有内置TS类型声明，按以下步骤处理即可：

新增类型声明文件
在项目根目录新建types/sweetalert.d.ts文件，写入以下内容：

// 如需完整类型提示，可先执行npm i @types/sweetalert2 -D，再使用下方配置
import type SweetAlert2 from 'sweetalert2';

declare module 'vue/types/vue' {
  interface Vue {
    $swal: typeof SweetAlert2.fire
  }
}

// 不需要类型提示可直接使用简化写法
// declare module 'vue/types/vue' {
//   interface Vue {
//     $swal: any
//   }
// }

调整tsconfig.json配置
确保配置中包含声明文件的识别路径，参考配置如下：

{
  "compilerOptions": {
    // 原有配置保留即可，新增以下typeRoots配置
    "typeRoots": [
      "node_modules/@types",
      "types"
    ]
  },
  "include": [
    "types/**/*.d.ts",
    "**/*.ts",
    "**/*.vue"
  ]
}