项目简介

vue2 脚手架项目 webpack打包项目体量不太大，src下总共100多个文件

豪言壮语

项目clone到本地时，我是比较有信心短期搞定的。毕竟V3已经出了很多年 V2升级V3那还不一搜一大堆帖子，到时候装个插件跑一遍命令直接搞定。于是我的目标就简化为vue2脚手架 webpack打包工具 ==>vue3 + vite 一键升级工具。搜了半天没有找到，仔细想一键升级确实不太容易，每个项目依赖的版本和插件都不一样。

眉头一皱

转念想 vue3 也是可以兼容vue2的吧。搞个部分升级把配置文件，构建工具升级上去，然后兼容vue2 代码，就这么弄。随即开始研究webpack打包和vite打包差异，索性在官网迁移指南找到了升级vite工具，webpack-to-vite,不展开说了有兴趣自己找一下，真的很好用，跑完命令稍微改一下就ok了。

再接再厉

本想着先做成这样子，毕竟按照某些角度来说确实升级了，性能也变高了。但底层的依赖还是vue2一套，没有真的升到vue3。那就研究vue2和vue3打包上的依赖差异吧

满头大汗

研究一通，我发现vue2跟vue3依赖差距很大，单升级某个依赖根本不可能，举例来说vue2和vue3模板编译不一样，而且像element这种组件库也要跟着底层依赖升级而升级。这样的结果就是对着package.json发呆，install A 报错说先install B ，升级 B 又说跟 C的版本不兼容，捋了一天才真正的搞完，懵懵的我也不确定正确的步骤，大概是删除vue-template-compiler 然后升级vue 安装vite-plugin。

手在抖

现在package.json搞定了，vite.config.js也搞定了，再把node版本调一调，启动。意料之中的报错，语法还没改！ main.js 里基本都得重写，而且有的功能或者组件没写在main.js里呢，这时想起同事推荐的gogocode插件，跑命令之后发现依旧不通，项目启动了页面打开了但是半瘫痪，面包屑导航没了，拖拽指令不生效了，路由跳转也不行了， vuex也报错了，全是乱的，跟用gogocode之前差不多。崩溃了难道真要一个一个改啊

说结论

第一步升级vite

安装webpacktovite，跑命令得到新的文件夹，指重点关注新文件夹里的vite.config.js。

第二步升级依赖

找到原项目的packge.json, 这里的配置，有的需要为了适应vue3，要升级版本（例如element-ui）,有些则是需要删除，因为vue2的编译依赖在vue3中不需要了，不仅不需要，留下不删还起冲突。还需要新加一些vue3的编译依赖。这部分至于装哪个删哪个，我建议用vite起一个空脚手架看看vue3编译需要哪些，然后搬过来，运行起来看报错，把vue2相关的依赖删掉，我好像知道但又好像不完全知道我就不误导别人了。

第三步改旧代码

此时如果安装依赖成功，是能够编译成功启动的。但是启动必然有报错，因为旧项目代码也需要相应改动。重点关注 main.js 这里面全局注册了很多功能，例如 router vuex directive 等还有element组件，这些都要改的（会报错的，看报错就行了），大多数都是语法改变，报什么改什么就行。 /public下的index.html也要调整，不展开说了，都在报错里

结尾

这些在报错中摸出来的步骤，哈哈哈有些惭愧升级项目我没做到前瞻和规划。我觉得难点是第二部vue2和vue3的依赖替换，很多依赖不知道是干啥的又不敢动，多研究研究，要是琢磨透了就会对vue理解更进一步了

VUE2升级经历，抛砖引玉

前言