html引入jq文件报错,Vue中引入jquery报错怎么办？

Vue中引入jquery报错怎么办？下面本篇文章给大家介绍一下Vue中引入jquery报错问题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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

更多web前端开发知识，请查阅 HTML中文网 ！！