vue中引入jquery报错问题

2023-06-17 15:49•html•阅读 4081

vue-cli搭建的vue项目中使用到jquery插件，需要引入jquery，

在无任何配置的情况下，直接在组件中import引入，在mounted时候打印$ 会显示undefined报错问题，

感觉直接引入不应该报这种错误，之前这么使用都是没问题的，网上查阅说有可能是如果项目使用了 eslint语法检验，此时会提示找不到 $或者jquery的错误。

错误如下：

http://eslint.org/docs/rules/no-undef '$' is not defined

http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

我的报错显然跟eslint无关，但还是进行了相关配置，配置如下：

在eslintrc.js文件的module.exports中，为env添加一个键值对 jquery: true 就可以了，也就是：

env: {

// 原有

browser: true,

// 添加

jquery: true

}

由于不是eslint的问题，我这边配置完之后当然还是报错$ undefined，

然后就考虑是jquery引入方式的问题，换了一种方式引入，

1. 在package.json中安装 jquery文件到dependencies中

2.在build文件夹下找到webpack.base.conf.js文件进行设置，使用webpack引入jquery，

　　（1）在头部引入webpack var webpack = require(‘webpack’)

　　（2）在module对jquery进行全局配置，在module.exports中加入以下代码

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
  })
],

　　（3）在main.js中引入 jquery，

import $ from 'jquery'

　　（4）配置完毕，重新运行项目，OK