vue2+webpack升级vue3+vite,修改插件兼容性bug

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


前言

在前面使用electron+vue3的过程中,已经验证了历史vue2代码+vue3混合开发的模式。

本次旧项目vue框架整体升级中,同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工具升级以及升级后,修改项目中使用到的插件工具兼容性bug。


一、修改记录

  1. 增加vite支持,根据vite官网内容,修改index.html中变量的写法,
  2. 解决lodash全局问题,lodash作为webpack的预存库,做过一些处理,引入后即可全局使用_.的方式,vite遵循es模块化,为了优化性能,对第三方库的处理与webpack不同,所以需要手动将_赋值给windows对象,
    在后续lodash的使用中,应该尽量按需引入,减少直至消除全局使用_的方式。
  3. 引入插件:npm i vite-plugin-dynamic-import,vite与webpack的编译方式不同,不能在import()函数中使用变量,所以引入此插件,这会损失部分性能。
  4. 上面插件不好用,vite现在遵循的原则与es6一致,我们写代码的习惯也应该遵循,所以我把import函数中需要变量的地方以其他形式实现需求。可能会降低可配置性,后续再设计解决方案
  5. vite里涉及的插件要求都是遵循ES6原则,用户管理模块用到的export2excel工具函数中,使用了require方式,并且借助webpack提供的语法,将js资源写入到body的script标签中,现在
    把它改为模块化使用file-saver、xlsx/xlsx.mjs插件的方式,xlsx插件版本过低,遂升级。export2excel.js不知是框架自带,还是个人封装,简单阅读其代码,注意插件引入的形式。
  6. vue3组件引入必须要加.vue后缀,比如 import(‘@/projects/project-base/modules/module-home/user-center/view/user-center.vue’)
  7. 本项目用的editor插件为@wangeditor/editor-for-vue,需要升级插件,适配vue3,好处是这个插件api可兼容,不用做过多修改,坏处是这个插件貌似下载量不高,当要求变高,可以换成quill、CKEditor等。
  8. 本项目中使用了sockjs-client插件,升级后报错“global is not defined at node_modules/sockjs-client/lib/utils/browser-crypto.js”,把模块引入的语法修改即可:
import SockJS from 'sockjs-client'

改为:

import SockJS from 'sockjs-client/dist/sockjs.min.js'
  1. 将所有的echarts引入语法
const echarts = require('echarts')
import * as echarts from 'echarts'
  1. 报错:“barPolar.js:63 Uncaught TypeError: Cannot read properties of undefined (reading ‘type’)”

这是echarts插件报错,原因是项目中把echart对象变为响应式,vue3响应式实现是利用代理实现,这会导致把echart变成一个代理对象,
可能造成echart插件本身某些api无法实现。

经过排查,找到“module-mail/mail-stats/view/mail-stats”组件,把其中在data中定义的myChart对象删除,然后修改所有和this.myChart相关代码即可。

  1. 主页面上面的导航栏点击后,页面不能正常跳转。这部分用到了标签组件:tags-nav.vue,查看代码可知,tags-nav.vue是main.vue的子组件,子组件中handleClick方法
    触发了update:value方法,而父组件中定义的是@input,导致点击handleclick时子组件向父组件传值出现问题。查看git记录,发现这是升级iviewui时导致的不兼容,所以决定
    更改main.vue中的应用,即把@input改为@update:value,后续框架修改也应大致遵循,底层优于顶层,框架优于应用的原则,在这次修改中,main.vue组件是tag-nav.vue的父组件,
    对于tags-nav而言,main.vue即是应用,所以应该优先修改main.vue,以避免造成更大影响,且更利于后续框架viewui的升级。

  2. vuedraggable组件时vue2版本,升级为vue3版本:

yarn add vuedraggable@next
  1. 上述第4条提到了,import()函数中加变量的方式不被vite支持,大屏各个模块的渲染也是基于import函数实现。
    大屏模块能做到通过解析json配置,动态加载组件,依靠的主要是两个技术点:
    a) vue组件:is属性,可动态加载组件
    b) import()函数:webpack支持import函数中设置变量,从而可动态生成要加载的组件。

核心代码大致如下:

 <component:is="importCom.c"ref="netEcharts":config-data="getCom(index)":para="{ dateType }"v-if="getCom(index)"></component>importCom() {let me = this//当配置页选择不同的路由时,无法监听到c属性,即import()函数的变化,所以无法进入此方法,也就无法达到实时改变组件的效果//为返回值增加一个无用的r属性,r,t属性的作用只有一个:保证当route值、dateType改变时,此方法体可以被调用const route = me.getCom(this.index).routereturn { c: () => import('../' + route), r: route, t: this.dateType }},

依赖这种思路,实现了通过统一的json配置文件,加载大屏中各个模块的组件、名称等基本信息,并可通过修改json随意插拔。

现在import()函数在vite中不可使用变量,所以修改这部分代码,用vue3的方式实现(vue2(选项式)+vite如何加载异步组件没研究,感觉也没有研究的必要,因为vue2一般是搭配webpack):

//前面template部分代码不变,js部分改造为setup,核心代码如下import {computed, defineAsyncComponent} from 'vue'const importCom=computed(()=>{//当配置页选择不同的路由时,无法监听到c属性,即import()函数的变化,所以无法进入此方法,也就无法达到实时改变组件的效果//为返回值增加一个无用的r属性,r,t属性的作用只有一个:保证当route值、dateType改变时,此方法体可以被调用const route = getCom(props.index).routeconst viteComponents = import.meta.glob("../**/*.vue");return { c:defineAsyncComponent(viteComponents['../' + route]),r: route,t: props.dateType }})

主要是借助import.meta.glob生成多组件数组,import函数中虽然不能写变量,但是生成的组件数组+变量,可以得到需要的组件。
这样得到的组件是异步组件,通过defineAsyncComponent加载异步组件。

这部分内容网上资料不多,所以记录下来,以备后续完成第4条提过的路由插件里相关的配置功能。

  1. 应该是同事使用的升级vue3工具的问题,导致v-model都变成了v-model:value,手动改回v-mode。
  2. vuedraggable由vue2版本升级vue3版本后,可能会遇到以下几种bug:
    a)vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’):这个一般是因为插件使用语法有问题,vue3版本的插件使用时,v-for不能
    自己手写,由插件提供的语法实现循环:
 <draggable v-model="configDataArr"><template #item="{element,index}"></template></draggable>

以上是插件最简几行代码,这四行不能缺失。
b)报错 draggable element must have an item slot:这报错也是因为没有写item插槽,按照上面的语法写了插槽后,这报错就能解决。
c)报错Item slot must have only one child:这是由于item插槽下有多个元素,应该只有一个div。哪怕是注释的div也会报错

 <draggable v-model="configDataArr"><template #item="{element,index}"><!--          {{element}}--><div>{{element}}</div></template></draggable>

上面示例中div上面的元素已经注释,仍会出错。正确写法:

 <draggable v-model="configDataArr"><template #item="{element,index}"><div>//这里可以随意写{{element}}</div></template></draggable>

总结

本文章仅作为记录笔记,有类似问题但感觉上面描述不详尽的同学,可评论或私信。

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

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

相关文章

【网络编程·数据链路层】MAC帧/以太网协议/ARP协议/RARP协议

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、MAC帧 1、IP地址和MAC地址的区别 2、MAC帧协议 3、MTU对IP协议的…

腾讯云2核4G服务器5M带宽 218元一年 优惠价格明细表

腾讯云2核4G服务器5M带宽可以选择轻量应用服务器或云服务器ECS&#xff0c;轻量2核4G5M带宽服务器218元一年&#xff1a; 腾讯云2核4G服务器5M带宽收费 腾讯云2核4G服务器可以选择轻量应用服务器或者ECS云服务器&#xff0c;云服务器ECS是专业级云服务器&#xff0c;大多数使用…

【K8S系列】深入解析k8s网络插件—Canal

序言 做一件事并不难&#xff0c;难的是在于坚持。坚持一下也不难&#xff0c;难的是坚持到底。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 在现代容器化应用程序的世界中…

docker-compose安装redis

基于docker-compose快速安装redis 目录 一、目录结构 1、docker-compose.yml 2、redis.conf 二、连接使用 一、目录结构 1、docker-compose.yml version: 3 services:redis:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/redis:6.0.8 # 镜像red…

项目集成swagger,访问不到swagger页面

项目集成swagger 文章目录 前言一、背景二、问题复现1.Full authentication is required to access this resource2.Illegal DefaultValue null for parameter type integer 总结 前言 项目集成swagger这个没啥好整的&#xff0c;maven项目就在pom文件导入依赖&#xff0c;ser…

linux xhost命令

xhost命令 XHOST 用于管理允许访问系统上 X Server 的主机和用户列表&#xff0c;这些主机和用户都可以从其他主机和同一系统上的其他用户访问。 通常&#xff0c;远程访问将被禁用&#xff0c;因为它会带来安全风险。 但是&#xff0c;如果我们需要在远程计算机上运行 GUI &…

【性能测试】Jmeter —— jmeter计数器

jmeter计数器 如果需要引用的数据量较大&#xff0c;且要求不能重复或者需要递增&#xff0c;那么可以使用计数器来实现 如&#xff1a;新增功能&#xff0c;要求名称不能重复 1&#xff0c;新增计数器 计数器&#xff1a;允许用户创建一个在线程组之内都可以被引用的计数器…

van-list 下拉刷新 触底分页 触底分页事件只加载一次

我是 头部是筛选的条件&#xff0c;&#xff0c;更换不同的状态&#xff0c;显示不同的列表数据&#xff0c;比如 审批中数据是 对的&#xff0c;触底分页也是对的&#xff0c;如果我切换一个状态的话&#xff0c;总共是 15条数据&#xff0c;但是 切换了状态只显示第一页的数据…

8个免费的AI和LLM游乐场

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 在本文中&#xff0c;我们的目标是通过引入八个用户友好的平台来弥合这一差距&#xff0c;这些平台使任何人都可以免费测试和比较开源AI模型。此外&#xff0c;它们还提供多种更新型号&#xff0c;确保您及时了解最新进…

无涯教程-JavaScript - SLN函数

描述 SLN函数返回资产在一个期间内的直线折旧。 语法 SLN (cost, salvage, life)争论 Argument描述Required/OptionalCostThe initial cost of the asset.RequiredSalvage The value at the end of the depreciation (sometimes called the salvage value of the asset).Re…

win11本地连接没了怎么办

很多用户在使用win11系统时发现自己的网络连接没有了&#xff0c;遇到这种情况的话&#xff0c;我们应该怎么处理呢&#xff1f;我们可以尝试打开网络图标&#xff0c;下面就是小编整理出的教程&#xff0c;大家一起看看吧。 win11本地连接没了怎么办 方法一&#xff1a; 1、…

数据分享|R语言武汉流动人口趋势预测:灰色模型GM(1,1)、ARIMA时间序列、logistic逻辑回归模型...

全文链接&#xff1a;http://tecdat.cn/?p32496 人口流动与迁移&#xff0c;作为人类产生以来就存在的一种社会现象&#xff0c;伴随着人类文明的不断进步从未间断&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 人力资源是社会文明进步、人民富裕…

Aruba 胖AP配置-Aruba胖AP默认密码

Aruba胖AP默认账号密码 Aruba AP Wifi6系列 默认账号密码 admin/AP序列号 Aruba AP wifi5系列 默认账号密码 admin/空 AP特性 Aruba AP 3xx/2xx/1xx 分胖瘦AP&#xff0c;型号AP为瘦AP&#xff0c;型号IAP为胖AP&#xff0c;IAP转AP直接维护内转换为CAP即可&#xff0c;AP转…

Redis I/O多路复用机制

一、基础回顾 1.1 多路复用要解决什么问题 并发多客户端连接场景&#xff0c;在多路复用之前最简单和典型的方案就是同步阻塞网络IO模型。 这种模式的特点就是用一个进程来处理一个网络连接(一个用户请求),比如一段典型的示例代码如下。 直接调用 recv 函数从一个 socket 上…

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印&#xff0c;则先另存为word&#xff0c;然后再按下面办法处理即可&#xff1a; 查看宏&#xff0c;创建&#xff1a;删除艺术字 添加内容&#xff1a; Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…

HTML的段落中怎么样显示出标签要使用的尖括号<>?

很简单&#xff1a; 符号 < 用 < 替代&#xff1b; 符号 > 用 > 替代。 示例代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>HTML中怎样打出尖括号</title> </head> <b…

Android Aidl跨进程通讯(三)--进阶使用

学更好的别人&#xff0c; 做更好的自己。 ——《微卡智享》 本文长度为2478字&#xff0c;预计阅读6分钟 前言 Android的AIDL使用和异常报错都已经介绍过了&#xff0c;今天这篇还是在原来的Demo基础上加入几个AIDL的进阶使用方法。 】 AIDL进阶使用 微卡智享 in,out,inout的使…

2022年全国研究生数学建模竞赛华为杯A题移动场景超分辨定位问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 A题 移动场景超分辨定位问题 原题再现&#xff1a; 在日常家庭生活中&#xff0c;人们可能需要花费大量时间去寻找随意摆放在家中某些角落里的小物品。但如果给某些重要物品贴上电路标签&#xff0c;再利用诸如扫地机器人的全屋覆盖能力&…

docker入门

弱小和无知不是生存的障碍&#xff0c;傲慢才是。 Docker 学习 Docker概述 Docker为什么出现&#xff1f; 一款产品&#xff1a; 开发–上线 两套环境&#xff01;应用环境&#xff0c;应用配置&#xff01; 开发 — 运维。 问题&#xff1a;我在我的电脑上可以允许&#…

Vuex -访问(modules)模块中的 state mutations actions getters

文章目录 四大核心复习一、获取模块内的state数据1.目标&#xff1a;2.使用模块中的数据3.代码示例 二、获取模块内的getters数据1.目标&#xff1a;2.语法&#xff1a;3.代码演示 三、获取模块内的mutations方法1.目标&#xff1a;2.注意&#xff1a;3.调用方式&#xff1a;4.…