Error:$ is not defined ,vue 项目中引入 jquery 报错及解决方法
Error:$ is not defined ,vue 项目中引入 jquery 报错及解决方法
·
问题描述
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
错误解决 ( 说实话感觉自己有点不太聪明的样子 )
文章如有错误,恳请大家提出问题,本人不胜感激 。 不懂的地方可以评论,我都会 一 一 回复
文章对大家有帮助的话,希望大家能动手点赞鼓励,大家未来一起努力 长路漫漫,道阻且长
更多推荐
已为社区贡献14条内容
所有评论(0)