成功解决:jQuery is not defined

简介: 这篇文章介绍了如何解决在使用jQuery时浏览器控制台报错`jQuery is not defined`的问题,通过在webpack配置文件中添加特定的插件配置来确保jQuery被正确加载和使用。

前言

项目可以正常启动、但是浏览器没有加载出来页面。查看控制台、控制台报错。我已安装jquery、也在main.js引入。问题的原因是还需要在配置文件中进行配置。如下过程

在这里插入图片描述
页面未加载出来

在这里插入图片描述

报错信息

他说:jQuery is not defined ,我已经安装了jquery、并且在main.js和要使用的页面都引入了jquery。按照常理推导、应该还需要修改某些配置文件、才可以让其生效

在这里插入图片描述

解决方法

webpack.base.conf.js 中修改配置

在文件中添加如下两行代码、注意添加的位置。添加位置如下图所示。 然后重新npm run start一定要重新运行项目,要不然修改的配置可能不生效

var webpack = require('webpack')

plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })],

在这里插入图片描述

问题说明

plugin使用方式:

  • 1、通常我们需要集成某款plugin时,会先通过npm安装到本地
  • 2、然后在配置文件(webpack.config.js)的头部引入,在plugins那一栏使用new关键字生成插件的实例注入到webpack。

成功解决

重新运行项目、就可以了、控制台也不会报jauery 未定义的错误了。重新运行项目、就会加载修改的配置文件了。
在这里插入图片描述

在这里插入图片描述

资料参考

BootStrap依赖jquery、需要配置jquery。

资料参考:1、BootStrap在Vue中的安装使用详细教程

资料参考:2、简说webpack plugin

相关文章
|
24天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
34 4
|
2月前
|
JavaScript 前端开发
Bootstrap‘s JavaScript requires jQuery
文章讨论了网页开发中因jQuery库未正确引入或顺序不当导致的三个常见错误,并指出解决这些问题需要确保jQuery在其他依赖它的脚本之前加载。
|
JavaScript 前端开发
JavaScript 专题之从零实现 jQuery 的 extend
JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 extend 函数
147 0
JavaScript 专题之从零实现 jQuery 的 extend
|
存储 缓存 前端开发