后台从 vue2 迁移到 vue3

qq_41302594

已于 2022-07-18 16:12:46 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

于 2022-06-17 16:52:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41302594/article/details/125336599

版权

本文详细记录了一个项目从Vue2迁移到Vue3的过程，包括升级Vue、ElementUI到Element-Plus、Vue-Router到v4以及使用Vite。在迁移过程中，遇到的问题和解决方案，如修改全局对象的使用方式、处理Vue3不兼容的代码、调整样式和API等。同时，还介绍了如何为Vite添加插件和进行分包打包以优化首屏加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人熟悉react并不熟悉vue，所以迁移可能有问题

项目迁移概览

项目之前使用的 vue2，由于 vue3 和 vite 已经更新到可以投入到生产环境，所以，本着追求最新技术的原则，已经升级到了 vue3，打包器也已经换成了 vite。

修改的部分

由于 vue3 在创建项目时，改变了创建的方式，所以原本使用利用 Vue 原型挂在全局对象的方式已经不适用了：

import Vue from "vue";

Vue.protytpe.$test = "test";

会报错，Vue 不是从 “vue” 中导出的；

需要修改成：

import { createApp } from "vue";

const app = createApp(app);
window.$vueApp = app;
app.config.globalProperties.$test = "test"; // 后续的全局对象可以利用 window.$vueApp.config.globalProperties 来挂载

以后，在 vue 组件中，直接通过 this 使用全局对象即可。

另一个需要注意的方面是，由于修改了创建 Vue app 的方式，使得不能够在创建 vue app 的其他页面，通过 window 上挂在的 vue 对象，使用该对象挂载全局数据，会报错 undefined 错误。因为，实际上，在 main.js 中执行 createApp(app) 之前，window 上并未挂载 vue app 对象。

升级过程

vue2 -> vue3

首先，利用 vue 官方的脚手架，将依赖升级为 vue3：

  npm uninstall vue-cli

  npm isntall -g @vue/cli

  npm upgrade --next

  npm install vue@next

以上方法，会将 vue 升级到最新的版本，然后是 vue 代码的升级。

这个相对而言比较简单，github 上有许多库，可以帮助我们将 vue2 的代码，升级为 vue3 的代码，我使用的是 gogocode-cli：

npm install gogogcode-cli -g

进入对应的项目根目录，使用：

gogocode-cli -s ./src -t gogocode-plugin-vue -o ./scr-out

即可将 vue2 代码升级到 vue3。

启动项目后，会有非常多的 eslint 错误，在 vue.config.js 中，添加忽视即可：

module.exports = {
  lintOnSave: false,
};

然后进入对应的文件中，将 vue3 不兼容 vue2 的代码一个一个进行修改即可。

element-ui -> element-plus

由于 vue2 升级到了 vue3，vue3 几个破坏性的改动，原本的 element-ui 也需要改动，幸好 elementui 官方有一个 vue3 升级版的组件库，element-plus。

安装 element-plus：

npm install element-plus

修改导入方式：

import Element from "element-plus";
import "element-plus/dist/index.css";

app.use(Element);

利用 gogocode-cli 升级 element-ui

gogocode -s ./src -t gogocode-plugin-prettier  -o ./src-element-plus

相关代码会更新到 element-plus 包。

需要注意，element-plus 在样式上有更新，最大的更新点在 Form 控件上，相关的尺寸的减少。如果小了，请使用 size 来更换样式，或者手动全局覆盖样式。

vue-router -> vue-router v4

理由同上，

import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});
export default router;

// main.js 中
import router from "./router";

app.use(router);

注意，在 element-plus 中，虽然大部分代码保留了之前的 api 和写法，但是也有破坏性的更改，比如 el-menu。

@handsontable/vue -> @handsontable/vue3

原本的 @handsontable/vue 并不支持 vue3，升级到 @handsontable/vue3

添加 vite

原本 vue2 使用的打包器为 webpack，而 vue3 官方默认的打包器为 vite。为了跟随版本，升级 vite。

这里使用的 webpack-to-vite 这个插件

npm install @originjs/webpack-to-vite -g

webpack-to-vite -d ./

然后插件会扫描所有的文件，将 vue 的 vite 库，自动添加，并在 vite.config.js 中新增一些配置文件。

然后，修改 `package.json`` 中的启动命令，将启动方式更改为 vite:

{
  "scripts": {
    "serve-vite": "vite --mode alpha",
    "serve-vite-local": "vite --mode local",
    "serve-vite-prod": "vite --mode prod",
    "build-vite-local": "vite build --mode local",
    "build-vite-prod": "vite build --mode prod",
    "build-vite-test": "vite build --mode alpha",
    "preview-vite": "vite preview"
  }
}

目前，vite3 已经推进到 alpha 版本，至于为什么不上 vite 3，因为 vite3 于 zlib 不兼容，zlib 太老了。

为 vite 新增一些插件

新增打包分析，rollup-plugin-visualizer;
```
plugins: [visualizer()];
```
新增 element-plus 按需加载 unplugin-element-plus/vite;
```
plugins: [ElementPlus()];
```

新增 vite 对传统浏览器的支持 @vitejs/plugin-legacy;

legacy({
 targets: ["defaults", "not IE 11"],
}), // 对移动端做支持，而不支持 ie

新增 vite 打包时对图片进行压缩 vite-plugin-imagemin;

viteImageMin({
  gifsicle: {
    optimizationLevel: 7,
    interlaced: false,
  },
  optipng: {
    optimizationLevel: 7,
  },
  mozjpeg: {
    quality: 20,
  },
  pngquant: {
    quality: [0.8, 0.9],
    speed: 4,
  },
  svgo: {
    plugins: [
      {
        name: "removeViewBox",
      },
      {
        name: "removeEmptyAttrs",
        active: false,
      },
    ],
  },
}),

开启 gzip 压缩，rollup-plugin-gzip
```
plugins: [gzipPlugin()];
```

vite 分包打包

大文件切分小文件，防止单个文件过大，影响首屏速度

build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return `node_modules/${id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString()}`;
          }
        },
      },
    },
  },

利用 vuer-router 的动态导入，来加快首屏加载的速度

const page = () => import("@/views/test");

const routes = [
  {
    path: "/sys/test",
    component: page,
    meta: { isPublic: true },
  },
];

以上，从 vue2 升级到 vue3 的过程。同时伴随一些小小的优化。由于本人本身不太熟悉 vue，还需要继续研究。

直接按照直接的 vue2 习惯来写就行了，不需要刻意的去按照 vue3 的写法