成功解决: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

相关文章
|
开发框架 移动开发 小程序
uniapp实现上传文件功能
uniapp实现上传文件功能
1743 0
|
消息中间件 XML 网络协议
『NLog』.Net使用NLog使用方式及详细配置(输出至文件/RabbitMQ/远程网络Tcp)
📣读完这篇文章里你能收获到 - Nlog输出至文件/RabbitMQ/远程网络Tcp配置文档 - Nlog配置参数详解 - .NET CORE项目接入
6851 0
『NLog』.Net使用NLog使用方式及详细配置(输出至文件/RabbitMQ/远程网络Tcp)
|
5月前
|
人工智能 Linux API
OpenClaw+大模型构建超级个体工作流:阿里云、MacOS/Linux/Windows11部署详细步骤与自动化开发实战
在AI辅助开发全面普及的2026年,掌握OpenClaw智能体编排框架,搭配高性能大模型,能够快速实现从需求分析、代码生成、单元测试到部署上线的全流程自动化,让个人开发者实现“一人成团队”的超级个体工作模式。本文基于实战场景,完整讲解OpenClaw环境配置、MiniMax与千问/Coding Plan API对接、多模型回退保障、自动化项目生成流程,同时提供2026年阿里云服务器部署、MacOS/Linux/Windows11本地部署详细步骤,搭配全套可直接运行代码命令与常见问题解决方案,帮助开发者快速从手动编码转向AI指挥模式,大幅提升开发效率。
963 6
|
11月前
|
存储 安全 Linux
处理Git错误:“invalid object [hash]”和“unable to read tree [hash]”
通过以上步骤,通常能够处理并解决Git中的“invalid object [hash]”和“unable to read tree [hash]”错误。当处理这些问题时,需要谨慎操作,因为错误的操作可能会导致数据丢失。如果不确定如何进行,考虑寻求有经验的同事或Git社区的帮助。
593 16
|
JavaScript
Vite env 环境配置
Vite env 环境配置
789 4
Vite env 环境配置
|
存储 开发者 Docker
【Layui】Layui下select下拉框不显示或没有效果
【Layui】Layui下select下拉框不显示或没有效果
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
前端开发 JavaScript
前端框架的选型、分类、常用框架整理(含官网链接)
前端框架的选型、分类、常用框架整理(含官网链接)
1080 7