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'

9. 将所有的echarts引入语法

const echarts = require('echarts')

import * as echarts from 'echarts'

10. 报错：“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相关代码即可。

11. 主页面上面的导航栏点击后，页面不能正常跳转。这部分用到了标签组件：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的升级。

12. vuedraggable组件时vue2版本，升级为vue3版本：

yarn add vuedraggable@next

13. 上述第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).route
      return { 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).route
   const viteComponents = import.meta.glob("../**/*.vue");

   return { c:defineAsyncComponent(viteComponents['../' + route]),
     r: route,
     t: props.dateType }
 })

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

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

14. 应该是同事使用的升级vue3工具的问题，导致v-model都变成了v-model:value,手动改回v-mode。
15. 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>

---

总结

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