• 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

  • 相关阅读:
    index()方法
    extend()方法
    count()方法
    copy()方法
    clear()方法
    append()方法
    IE botton 点击文字下沉
    IE滚动条
    关闭windows10自动更新
    vue文件名规范
  • 原文地址:https://www.cnblogs.com/fairy62/p/9389659.html
Copyright © 2020-2023  润新知