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