问题描述

vue 项目中需要使用  jquery ,刚开始还没有引入 相关包,在代码中直接使用 $.ajax ,结果报错

 控制台报错

$ is not defined


 安装 jquery 之后,也产生一些奇怪报错(如下)

控制台报错


 页面报错


 解决方法(正确引入 jquery)

方法一(不推荐)

直接在 vue 项目的 index.html 中引入 jquery 外部链接即可

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

 不推荐:因为引入 jquery 外部链接或者引入下载好的 js 文件这种方式不参与打包,需要下载到本地的 jquery 文件引入才可以进行打包操作 ,这种方法只能解决一时之需 ,平时开发中往往很少使用

方法二

安装 jquery 依赖包

cnpm i jquery --save

 全局引入

# 在src/main.js文件
import jquery from 'jquery'
Vue.prototype.$ = jquery

 局部引入(在需要使用 jquery 的页面引入)

#在需要的组件中
import $ from 'jquery'

 上面两种引入方式都可以,按照自己的需求选择

 修改 vue.config.js (可能有用)

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

我的问题(注意:踩坑)

 安装错误   把 jquery 装成  jQuery


然后我一直在修改 vue.config.js (这肯定没有用啊)


后面发现安装错误

 重新安装 jquery (注意是小写)

cnpm i jquery

错误解决 ( 说实话感觉自己有点不太聪明的样子


文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复

文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力     长路漫漫,道阻且长

Logo

前往低代码交流专区

更多推荐