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中文网 !!

以上就是Vue中引入jquery报错怎么办?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏