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

相关文章
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
1173 0
|
SQL 存储 关系型数据库
解析MySQL Binlog:从零开始的入门指南【binlog入门指南】
解析MySQL Binlog:从零开始的入门指南【binlog入门指南】
13192 0
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
9366 120
|
10月前
|
Unix Linux 虚拟化
VMware Workstation 17.6.2 发布下载,现在完全免费无论个人还是商业用途
VMware Workstation 17.6.2 发布下载,现在完全免费无论个人还是商业用途
45290 16
VMware Workstation 17.6.2 发布下载,现在完全免费无论个人还是商业用途
|
设计模式 移动开发 Java
【阿里规约】阿里开发手册解读——代码格式篇
本文所有代码格式规范遵循《阿里规约》,从编码、换行符、空格规则、括号规则、字符数等方面展开,详细阐述方法参数、强制转换、运算符、缩进等元素的编写规范。
【阿里规约】阿里开发手册解读——代码格式篇
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
前端开发
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
|
JavaScript 测试技术 API
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
如何从 Vue 2 无痛升级到 Vue 3,一文搞定!
|
Web App开发 Java 网络安全
PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
3682 0