Vue3组件引入jQuery报错：Could not find a declaration file for module 'jquery'

出现“Could not find a declaration file for module 'jquery'”错误的核心原因是：jQuery本身未附带TypeScript类型声明文件，而你的Vue3项目启用了TypeScript（或Vue CLI默认的类型检查），导致TS无法识别jQuery模块的类型定义。

以下是几种可行的解决方法：

方法1：安装官方类型声明包 #

这是最直接的解决方案，安装社区维护的jQuery类型声明文件：

npm install @types/jquery --save-dev

安装完成后，重新在组件中执行import $ from "jquery";即可正常使用，TS会自动识别类型定义，错误提示也会消失。

方法2：手动添加类型声明文件 #

如果不想安装额外的依赖，可以手动创建一个类型声明文件：

1. 在项目的src目录下创建一个名为typings.d.ts的文件（如果已有则直接编辑）
2. 在文件中添加以下代码：

declare module 'jquery';

这个声明会告诉TS“jquery是一个合法的模块”，从而跳过类型检查，之后就能正常引入并使用jQuery了。

方法3：全局引入jQuery（无需每个组件单独import） #

如果需要在多个组件中使用jQuery，可以通过构建工具配置将其设为全局变量：

Vue CLI（webpack）配置 #

项目根目录创建或修改vue.config.js文件，添加以下配置：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

Vite配置 #

项目根目录创建或修改vite.config.js文件，添加以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'jquery': 'jquery/dist/jquery.min.js'
    }
  },
  optimizeDeps: {
    include: ['jquery']
  }
})

无论使用哪种构建工具，都需要配合方法1或方法2解决类型声明问题，之后在任意组件中无需import即可直接使用$或jQuery。

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