vue2项目升级到vue3遇到的问题汇总

背景：一个简单的报表系统只有查询功能，应国家等保2.0规定修改为需要有登录功能以及操作日志，因此为了节省时间直接使用ruoyi-vue3-master版本直接升级，java后台倒是挺简单的，但是vue2-》vue3问题挺多的

1. 首先是运行项目时提示import_vite_plugin_svg_icons.createSvgIconsPlugin不存在

PS D:\Epson\EiMSReport\RuoYi-Vue3-master-EimsReport2UI> npm run dev

> ruoyi@3.8.6 dev
> vite

failed to load config from D:\Epson\EiMSReport\RuoYi-Vue3-master-EimsReport2UI\vite.config.js
error when starting dev server:
TypeError: (0 , import_vite_plugin_svg_icons.createSvgIconsPlugin) is not a function
    at createSvgIcon (D:\Epson\EiMSReport\RuoYi-Vue3-master-EimsReport2UI\vite.config.js:54:64)
    at createVitePlugins (D:\Epson\EiMSReport\RuoYi-Vue3-master-EimsReport2UI\vite.config.js:100:20)
    at D:\Epson\EiMSReport\RuoYi-Vue3-master-EimsReport2UI\vite.config.js:112:14
    at loadConfigFromFile (file:///D:/Epson/EiMSReport/RuoYi-Vue3-master-EimsReport2UI/node_modules/vite/dist/node/chunks/dep-2faf2534.js:63023:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async resolveConfig (file:///D:/Epson/EiMSReport/RuoYi-Vue3-master-EimsReport2UI/node_modules/vite/dist/node/chunks/dep-2faf2534.js:62643:28)
    at async createServer (file:///D:/Epson/EiMSReport/RuoYi-Vue3-master-EimsReport2UI/node_modules/vite/dist/node/chunks/dep-2faf2534.js:61943:20)
    at async CAC.<anonymous> (file:///D:/Epson/EiMSReport/RuoYi-Vue3-master-EimsReport2UI/node_modules/vite/dist/node/cli.js:707:24)

解决办法：打开package.json把低版本的vite-plugin-svg-icons升级为"vite-plugin-svg-icons": "2.0.1"高版本即可

2. 创建vue

vue2的写法 : import Vue from 'vue'

vue3的写法 : import { createApp } from 'vue'  //引入vue的构造函数createApp ,是官网推荐的，不改也是可以的，但是Vue的用法我需要使用Vue3的语法，刚好就顺便改了
              import App from './App'   引入主页面
              const app = createApp(App) ，以上3句才能真正创建vue 

3.  定义时间格式全局过滤器

vue2的写法 :

Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
      return moment(daraStr).format(pattern)
    })

vue3的写法 :

app.config.globalProperties.$filters = {dateFormat(daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(daraStr).format(pattern)} }// 定义时间格式全局过滤器   

4.  vue2自定义组件中使用到的修饰符sync（例如：:trees.sync ，:model.sync），

v-model.sync 将表单元素的值与数据对象中的 username 属性进行双向绑定。当输入框的值发生变化时，username 属性的值也会自动更新；反之亦然

解决办法： 直接去除sync关键字即可 

例如 vue2写法定义组件： <treeItem v-for="(model,i) in treeDataSource" :key="'root_node_'+i" :root="0"  :num="i" :nodes="treeDataSource.length" :trees.sync="treeDataSource" :model.sync="model" ></treeItem>

vue3的写法定义组件：    <treeItem v-for="(model, i) in treeDataSource" :key="`root_node_${i}`" :root="0" :num="i" :nodes="treeDataSource.length"  :trees="treeDataSource" :model="model" ></treeItem>