目录
- 前言
- 迁移前后对比
- 迁移流程
- 迁移业务代码到vite项目
- 项目开发阶段报错处理
- 项目打包阶段处理
- 总结
一. 前言
公司有个特别大维护时间长的后台管理系统,使用的是vue2和webpack3,虽然配置了很多编译优化,但启动和开发热更新速度依然很慢,极大的影响了开发效率,于是准备迁移vite2来优化,现在已迁移升级,来复盘记录下过程,至于vite速度快于webpack的原因,已经有很多文章讲的很明白,这里只记录下迁移过程和遇到的问题。
二. 迁移前后对比
对比 | 迁移前webpack3 | 迁移后vite2 |
---|---|---|
启动开发模式 | 40秒 | 3秒之内 |
热更新 | 6秒+ | 1秒之内 |
打包构建(vite不做低版本浏览器兼容) | 2分30秒 | 40秒 |
打包构建(vite做低版本浏览器兼容) | 2分30秒 | 1分05秒 |
三. 迁移流程
- 先创建新的vite项目
- 新版vite项目默认是支持vue3的,需要把vue改成vue2版本后配置vite-plugin-vue2插件来支持vue2
- 把项目代码改成vue2写法,确保新vite项目可以正常运行vue2
- 把原webpack项目生产环境依赖复制到vite项目,剔除掉webpack相关的插件依赖
- 复制原项目src文件代码和其他业务相关代码到新vite项目。
- 新vite项目配置开发环境启动命令,根据报错信息来进行调整。
- 在测试开发和打包环境都没问题后,替换原先的项目。
四. 迁移业务代码到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>{