关于后台管理系统项目从Vue2.0迁移到Vue3.0的注意事项和Bug处理及迁移后的感受

前几天把 Vue3.0 学完了，于是就将之前使用 Vue2.0 写的后台管理项目迁移到了 Vue3.0 版本进行重构。对其中牵扯到的内容很多，如组件 Element-ui 版本升级为 Element-plus 后改写组件及内容、对于之前模块化和组件化的重新封装，还有依赖安装，版本的升级迁移、还有一系列的 Bug 问题解决思路等等进行了一次记录。

项目迁移到 Vue3 的流程

首先使用 create vite 脚手架搭建 Vue 3 的项目

npm create vite my-back-stage

在进行 Vue3 的版本升级中就有遇到问题，首先便是关于 vite 版本的问题，开始是使用

vite init vite-app 创建项目，然后就导致与安装的依赖发生碰撞报错，废了好长时间，最后也是切换了 vite 脚手架才调整好

然后安装在 Vue2.0 版本中用到的一些列依赖，其中有依赖需要升级，如 element-ui 升级到 element-plus等，

npm i vue-router pinia sass element-plus echarts axios qs vite-aliases font-awesome ...

在这方面非常需要注意关于版本问题，安装的很多依赖可能会因为不同版本而产生冲突报错，出现时就需要切换版本不停的去尝试。

接着便是关于配置方面的问题，路由配置 vue 2 和 vue 3 版本倒是没有太多变化，就是关于获取路由对象需要 useRouter() 或 useRoute() 创建使用。更多的是在 vite.config.vue 中的跨域问题配置，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ViteAliases } from "vite-aliases"
export default defineConfig({
  plugins: [
    vue(),
    ViteAliases({ prefix: "@" }) // 通过安装的 vite-aliases 插件配置路径 @ 符号
  ],
  server: { // 关于跨域的配置
    proxy: {
      '/api': {
        target: 'http://1.116.64.64:5004/api2',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
})

然后是在 main.js 中的配置，Vue2.0 中挂载全局组件或全局方法的方式发生了改变

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'


import router from "./router";

import elementPlus from "element-plus";
import 'element-plus/dist/index.css';
import local from 'element-plus/es/locale/lang/zh-cn';
import 'font-awesome/css/font-awesome.min.css'

import service from "@/api/service"
// 
const app = createApp(App);
app.config.globalProperties.service = service;
app.use(elementPlus, { local });
app.use(router);
app.mount('#app');

还有就是关于页面中依赖的如 element-plus 之类组件的改变，比如之前的 el-submenu 组件要改写成 el-sub-menu 才能保证效果显示，关于 slot = "name" 要变成 #name 之类的需要变化，还有之前 ref 验证之类的不断更改。

遇到的问题及解决方式

遇到的问题有很多，比如之前封装的有一个模块是需要将该组件的 this 传入来操作依赖到的需要 this 属性，但是在 Vue3.0 中没有 this 。解决方案：将模块中用到的数据写入一个对象中，并保证该对象和内部以来的数据能够保持着响应式。

还有就是对于 vue3.0 中使用 reactive 函数声明数组的响应式对象，在被重新赋值后失去响应式的问题，解决方式是先将数组 length 赋值为 0，然后再将新的数据 push 到原来的响应式数据。

let data = reactive([1, 2, 3, 4, 5]);
data.length = 0
data.push(...[1, 1, 1, 1, 1]);

其中问题最多的还是对于模块化封装中调用的问题，在项目迁移重构后处理这类问题变得非常繁琐且复杂，这就要考验个人的坚持了，当这些繁杂的问题被解决后真的是一身轻松。

bug及解决方式

在迁移过程中遇到最多 bug 的便是依赖版本的问题，真的是各个依赖不停发生冲突，解决方式只能是不断的尝试版本的切换。

附上两张 Vue2.0 和 Vue3.0 迁移前后的代码

东西很多，不是三言两语能够说完，先记录到这里，希望能够有所帮助！

关于后台管理系统项目从Vue2.0迁移到Vue3.0的注意事项和Bug处理及迁移后的感受

猜你喜欢