【前端架构】vue2+webpack3项目迁移vite2记录

目录

1. 前言
2. 迁移前后对比
3. 迁移流程
4. 迁移业务代码到vite项目
5. 项目开发阶段报错处理
6. 项目打包阶段处理
7. 总结

一. 前言

公司有个特别大维护时间长的后台管理系统，使用的是vue2和webpack3，虽然配置了很多编译优化，但启动和开发热更新速度依然很慢，极大的影响了开发效率，于是准备迁移vite2来优化，现在已迁移升级，来复盘记录下过程，至于vite速度快于webpack的原因，已经有很多文章讲的很明白，这里只记录下迁移过程和遇到的问题。

二. 迁移前后对比

对比	迁移前webpack3	迁移后vite2
启动开发模式	40秒	3秒之内
热更新	6秒+	1秒之内
打包构建(vite不做低版本浏览器兼容)	2分30秒	40秒
打包构建(vite做低版本浏览器兼容)	2分30秒	1分05秒

三. 迁移流程

1. 先创建新的vite项目
2. 新版vite项目默认是支持vue3的，需要把vue改成vue2版本后配置vite-plugin-vue2插件来支持vue2
3. 把项目代码改成vue2写法，确保新vite项目可以正常运行vue2
4. 把原webpack项目生产环境依赖复制到vite项目，剔除掉webpack相关的插件依赖
5. 复制原项目src文件代码和其他业务相关代码到新vite项目。
6. 新vite项目配置开发环境启动命令，根据报错信息来进行调整。
7. 在测试开发和打包环境都没问题后，替换原先的项目。

四. 迁移业务代码到vite项目

4.1 创建新的vite项目

打开vite官网,按照官网提示创建新的vite项目(由于原先项目没有用ts，所以创建项目不选ts版本，包管理工具也依然选择是npm)。

npm init vite@latest my-vue-app -- --template vue 

创建完成后，使用vs code打开，打开命令行，执行npm i安装依赖

npm i 

安装依赖完成后，使用npm run dev启动项目

npm run dev 

启动完成后，打开项目地址http://localhost:3000/

此时基本的vite2+vue3项目已经启动成功了，但此时vite支持的还是vue3版本的，我们需要让vite支持vue2版本。

4.2 配置vite支持vue2

此时打开vite.config.js,里面的代码为

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})
​ 

@vitejs/plugin-vue插件是对vue3语法做支持，如果要支持vue2，需要用vite-plugin-vue2

第一步，从vite中删除 @vitejs/plugin-vue配置，从package.json文件中也删除。

npm uninstall @vitejs/plugin-vue -D 

第二步,安装vite-plugin-vue2依赖

npm install vite-plugin-vue2 -D 

第三步,在vite.config.js文件配置vite-plugin-vue2

import { defineConfig } from 'vite'
import { createVuePlugin } from "vite-plugin-vue2";
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [createVuePlugin()]
}) 

第四步，修改vue版本由3改为2版本

npm install vue@2 -S 

第五步, 修改main.js，创建根vue实例写法改为vue2写法

import Vue from 'vue'
import App from './App.vue'
​
new Vue({
  render: h => h(App),
}).$mount('#app') 

第六步，修改main.js完成后，修改App.vue文件代码为vue2格式代码

<template>
  <h1>{