vue2+webpack升级vue3+vite,报错Cannot read properties of null (reading ‘isCE‘)

同学们可以私信我加入学习群!


正文开始

  • 前言
  • 问题
  • 分析
  • 解决
  • 总结


前言

系列文章:vue2+webpack升级vue3+vite,修改插件兼容性bug

前面的文章主要是介绍,在升级初始阶段遇到的一些显而易见的兼容性问题和bug。随着项目迭代的不断深入,一些不容易暴露的问题也渐渐呈现。

本文主要记录一些开发重构过程中的bug


问题

vue报错Cannot read properties of null (reading ‘isCE’)

分析

项目中vue版本出现冲突,可能是项目基础的vue版本与组件库中某个组件依赖的vue版本有冲突。但是我怀疑这只是表象,因为如果存在版本冲突,那么第一天就存在,为什么后面才暴露。而且使用npm列出所有vue版本发现并没有冲突的版本。所以最终虽然解决了,但是总觉得还是不太清楚。

解决

  1. 命令行中输入
npm ls vue

可以查看所有vue的版本,如图:
在这里插入图片描述
如果各位使用脚手架创建的项目,vue的版本会设置‘^’符号,例如我的设置为:

 "vue": "^3.3.4",

大家可以看到package.json中设置的版本号与实际项目中依赖的vue版本并不完全相同,这是因为^符号的含义就是保持大版本不变,可以根据兼容性等实际情况,升级小版本,所以 ’ ^3.3.4’的真实含义是3.3.4及以上版本,这样其实很难真的出现vue版本冲突的情况。通过上面的图片也可以知道,我的所有插件都是依赖于3.3.6。

实际情况确实是报错vue版本冲突,所以我只能认为可能是因为别的原因导致了这个报错,也就是其实报错信息就有问题。我没有想到其他方法严谨地定位到问题,只能把可以做的都做了一遍。

  1. 升级node

看一下自己的node版本,vue2在16版本的node中运行毫无问题,vue3在部分16版本的node中也无太大问题,但是总会出现预料不到的风险,甚至升级某些插件时也会提示node版本过低。vue官网也推荐18版本以上node:
在这里插入图片描述
所以为了省事,还是直接升级node吧。

这里有个问题,那就是18版本的node可能运行vue2时会报错,所以如果是升级vue,可能会有一段时间,既开发vue2,又重构vue3,我们就需要一个很方便的node版本管理工具,推荐nvm。我自己写的基于nvm的可视化工具也快要完成了,基本功能已经实现,还达不到生产标准。

大家可以提前关注一波,等几个重要的工具同时开发完毕,会免费发布并群发消息提醒。如图:
在这里插入图片描述

  1. 虽然大概率不是vue版本的问题,但是为了以防万一,还是对vue版本做一个强制限制吧,在vite中配置参数dedupe,解决vue版本依赖冲突问题:
 resolve: {dedupe: ['vue'],},
  1. 如果这些还是无法解决,那就先清楚npm的缓存:
npm cache clean --force

删除node_modules后,重新更新资源,运行项目。


总结

博主的大部分文章都是有价值的原创文章,很少搬运点官方文档就水一篇,大家如果认可,希望多多点赞关注,原创不易,需要支持。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630878.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频美颜SDK技术解析与技术对比

当下,各类应用和服务纷纷采用视频美颜SDK,以提供更加令人满意的视觉效果。本文将深入探讨视频美颜SDK的技术原理,同时对比不同SDK的特性,为开发者和决策者提供全面的技术参考。 一、技术原理解析 1.图像处理基础 视频美颜SDK基…

易懂的方式讲解ARM中断原理以及中断嵌套方法

ARM有七种模式,我们这里只讨论SVC、IRQ和FIQ模式。 我们可以假设ARM核心有两根中断引脚(实际上是看不见的),一根叫 irq pin, 一根叫fiq pin。在ARM的cpsr中,有一个I位和一个F位,分别用来禁止IRQ和FIQ。 先…

MyBatisPlus学习笔记三-核心功能

接上篇: MyBatisPlus学习笔记二-CSDN博客 1、核心功能-IService开发基础业务接口 1.1、介绍 1.2、引用依赖 1.3、配置文件 1.4、用例-新增 1.5、用例-删除 1.6、用例-根据id查询 1.7、用例-根据ids查询 2、核心功能-IService开发复杂业务接口 2.1、实例-更新 3、…

Elasticsearch各种文档操作2

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据过滤字段查询文档概述指定想要显示的字段示例 初始化文档数据 在进行各种文档操作之前,我们先进行初始化文档数据的工作 过滤字段查询文档 概述 默认情况下,Elasticsearch 在搜索的结果中…

vite和webpack的区别和作用

前言 Vite 和 Webpack 都是现代化的前端构建工具,它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的,但它们在设计和实现方面有许多不同之处。 一、Vite详解和作用 vite 是什么 vite —— 一个由 vue 作者尤雨溪开发的 web 开发工…

CMake+QT+大漠插件的桌面应用开发(QThread)

文章目录 CMakeQT大漠插件的桌面应用开发(QThread)简介环境项目结构配置编译环境代码 CMakeQT大漠插件的桌面应用开发(QThread) 简介 在CMakeQT大漠插件的桌面应用开发中已经给出了QT配合大漠插件开发桌面应用的样例 不过由于主…

系统配置dns主从服务器

一、准备两台主机,区分主从 二、完全区域传送 1、主DNS服务器配置 #安装相关的包 [rootoula1 ~]# yum install bind -y#关闭防火墙 [rootoula1 ~]# systemctl stop firewalld [rootoula1 ~]# setenforce 0#修改配置主文件 [rootoula1 ~]# vim /etc/named.conf opt…

pygame学习(三)——支持多种类型的事件

大家好!我是码银🥰 欢迎关注🥰: CSDN:码银 公众号:码银学编程 实时事件循环 为了保证程序的持续刷新、保持打开的状态,我们会创建一个无限循环,通常使用的是while语句,w…

web架构师编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发

我们这一部分主要是对最右侧图层面板功能进行剖析,完成对应的功能的开发: 每个图层都对应编辑器上面的元素,有多少个元素就对应多少个图层,主要的功能如下: 锁定功能:点击锁定,在编辑器中没法编辑对应的组…

HashMap学习和线程安全的HashMap

HashMap的底层数据结构? HashMap在JDK1.8里面的Node数组加链表加红黑树,当链表长度大于8且数组长度大于64,链表转化为红黑树。当红黑树节点数小于6,红黑树转化为链表。在JDK1.7中是数组加链表。 为什么要用红黑树? 当…

阿赵UE学习笔记——11、地形系统

阿赵UE学习笔记目录 大家好,我是阿赵。   继续学习虚幻引擎的用法,这次来学习一下虚幻引擎的地形系统的用法。 一、创建地形 在选项模式里面,选择地形: 进入到地形界面之后,需要先创建一个地形: 留意看…

TensorRT部署-Windows环境配置

系列文章目录 文章目录 系列文章目录前言一、安装Visual Studio (2019)二、下载和安装nvidia显卡驱动三、下载CUDA四、下载安装cuDNN五、安装Anaconda六、TensorRT安装七、安装Opencv八、Cmake 配置总结 前言 TensorRT部署-Windows环境配置 一、安装Vis…

nginx+lua配置,一个域名配置https,docker集群使用

没安装kua的先安装lua 没有resty.http模块的,许配置 nginxlua配置,一个域名配置https,docker集群使用,一个域名配置https管理整个集群 lua做转发(方向代理) 1、ad_load.lua文件 ngx.header.content_typ…

Servlet系列两种创建方式

一、使用web.xml的方式配置(Servlet2.5之前使用) 在早期版本的Java EE中,可以使用XML配置文件来定义Servlet。在web.xml文件中,可以定义Servlet的名称、类名、初始化参数等。然后,在Java代码中实现Servlet接口&#x…

基于NLP的恶意网页识别

基于NLP的恶意网页识别 基于NLP的恶意网页识别引言项目目录回顾优化HTML标签提取结果使用预训练模型Fine-tune数据处理和模型训练模型训练与评估模型导出部署与预测总结 基于NLP的恶意网页识别 引言 欢迎阅读《 基于NLP的恶意网页识别》,在前三篇中,我…

VS+QT编译环境中字符乱码问题详解

字符乱码问题详解 1 编码字符集与字符编码方式2 字符乱码原因3 字符乱码解决方案 在解释字符乱码问题之前,我们需要先理清一些基本概念 1 编码字符集与字符编码方式 编码字符集 编码字符集是所有字符以及对应代码值的集合。编码字符集中的每个字符都对应一个唯一的…

npm换源

检查现在的源地址 npm config get registry 使用淘宝镜像 npm config set registry https://registry.npm.taobao.org 使用官方镜像 npm config set registry https://registry.npmjs.org/

jeecgboot 前端bug or 后端 看图

无法显示文本 只能显示value 很恶心 如果用 varchar 就可以 不知道有没有别的方式 用int 解决 ,可能是我没有发现好的方法

渗透测试之如何部署和使用Supershell

环境: Supershell v2.0.0 Centos 7.6 docker v. 21 问题描述: 如何部署和使用Supershell 解决方案: 1、下载最新release源码,解压后进入项目目录 wget https://github.com/tdragon6/Supershell/releases/latest/download/Supershell.tar.gz如果在线下很慢,用浏览…

测试驱动开发:基于Jenkins+GoTest+HTML的持续化集成

目录 前言 一、项目框架 1.项目迭代 2.项目时序图 3.项目测试执行 二、项目具体实现 1.创建流水线 2.拉取代码 3.执行测试代码 4.生成测试报告 5.报告内容解读 6.数据统计 7.邮件通知 8.企业微信通知 三、项目遇到的问题 1.go test -args 2.go test生…