vue3全局使用jQuery

最新推荐文章于 2025-09-20 09:24:32 发布

原创最新推荐文章于 2025-09-20 09:24:32 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #vue.js

文章介绍了如何在Vue项目中集成jQuery，首先通过npm安装，然后在vue.config.js中配置webpack的ProvidePlugin，确保全局可访问jQuery。同时，在eslint的配置文件中启用jquery环境。最后运行npmrunserve启动项目，即可在组件中使用jQuery。

先安装：

npm install jquery --save

然后在vue.config.js配置：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
        sass: {
            // 全局引入变量和mixin
            additionalData: `
            @import "@/assets/scss/variable.scss";
            @import "@/assets/scss/mixin.scss";
            `
        }
    }
   },
   configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  }
})