同学们可以私信我加入学习群!
前言
在前面使用electron+vue3的过程中,已经验证了历史vue2代码+vue3混合开发的模式。
本次旧项目vue框架整体升级中,同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工具升级以及升级后,修改项目中使用到的插件工具兼容性bug。
一、修改记录
- 增加vite支持,根据vite官网内容,修改index.html中变量的写法,
- 解决lodash全局问题,lodash作为webpack的预存库,做过一些处理,引入后即可全局使用_.的方式,vite遵循es模块化,为了优化性能,对第三方库的处理与webpack不同,所以需要手动将_赋值给windows对象,
在后续lodash的使用中,应该尽量按需引入,减少直至消除全局使用_的方式。 - 引入插件:npm i vite-plugin-dynamic-import,vite与webpack的编译方式不同,不能在import()函数中使用变量,所以引入此插件,这会损失部分性能。
- 上面插件不好用,vite现在遵循的原则与es6一致,我们写代码的习惯也应该遵循,所以我把import函数中需要变量的地方以其他形式实现需求。可能会降低可配置性,后续再设计解决方案
- vite里涉及的插件要求都是遵循ES6原则,用户管理模块用到的export2excel工具函数中,使用了require方式,并且借助webpack提供的语法,将js资源写入到body的script标签中,现在
把它改为模块化使用file-saver、xlsx/xlsx.mjs插件的方式,xlsx插件版本过低,遂升级。export2excel.js不知是框架自带,还是个人封装,简单阅读其代码,注意插件引入的形式。 - vue3组件引入必须要加.vue后缀,比如 import(‘@/projects/project-base/modules/module-home/user-center/view/user-center.vue’)
- 本项目用的editor插件为@wangeditor/editor-for-vue,需要升级插件,适配vue3,好处是这个插件api可兼容,不用做过多修改,坏处是这个插件貌似下载量不高,当要求变高,可以换成quill、CKEditor等。
- 本项目中使用了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'
- 将所有的echarts引入语法
const echarts = require('echarts')
import * as echarts from 'echarts'
- 报错:“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相关代码即可。
-
主页面上面的导航栏点击后,页面不能正常跳转。这部分用到了标签组件: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的升级。 -
vuedraggable组件时vue2版本,升级为vue3版本:
yarn add vuedraggable@next
- 上述第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条提过的路由插件里相关的配置功能。
- 应该是同事使用的升级vue3工具的问题,导致v-model都变成了v-model:value,手动改回v-mode。
- 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>
总结
本文章仅作为记录笔记,有类似问题但感觉上面描述不详尽的同学,可评论或私信。