数千 Vue 页面的老项目,用 AI 升级到 Vue 3:两周把\“不敢动\”的活干完了
两周前我还觉得这事儿挺离谱的:一个从 2019 一直加功能加到 2026 的大型 Vue2 前端项目,页面数是“数千”这个量级。几年前我们认真评估过一次升级成本——500~1000 人天,几乎等同重写。最后结论很现实:算了,成本扛不住。
但这两年 AI 编程的发展太快了,快到你会忍不住再回头看一眼当初“不可能”的东西。于是我决定趁热打铁:直接把项目从 Vue2 升到 Vue3。
开始前的几个前提(也是我这次的选择):
- 没有新开工程、逐步迁移(那种“搭新壳子慢慢搬”的模式我没走)
- 在原工程里新开分支,就地升级,随时能回滚
- 全程主力模型用 GPT 5.2 xhigh,负责把 Vue3 / Element Plus 等等基础组件升级、替换、并把构建跑通(
yarn dev/yarn build作为硬门槛) - 使用AI Skills,把 vue3 最佳实践 放了进来。AI每次修改都能准照Skills要求进行
为什么我敢这次真动手
我不太会前端(对,就是那种“能看懂、但不爱写”的程度),所以一开始对困难是有敬畏的:
页面多、路由多、历史包袱重,随便一个小改动可能就炸一片。
但也正因为我不算“前端熟练工”,我反而更愿意把过程变成一套“可控的流水线”——AI 不负责拍脑袋,我负责定规则、定验收、定节奏。
同时我也想再测试下 AI 的编程能力边界。
路线选择:原地升级,而不是新工程迁移
很多团队升级 Vue3 会选“新工程 + 双轨迁移”。优点是稳,缺点也很明显:周期长、维护成本高,两边要跑很久。
我这次选的是更激进但更直接的方式:
- 原仓库开新分支(比如
feat/vue3-upgrade) - 以“能跑起来”为第一目标,把工程骨架升级到 Vue3
- 然后再做“页面级的修修补补”,一点点把功能验证过去
这条路线有风险,但好处也很明显:
升级结果能尽快落地,而不是永远卡在“迁移中”。
我用到的 AI 工具(以及它们各自干什么)
我这次主要用两类工具(按我的实际体验分工):
- codex:适合做“批量、工程级”的活(大范围改造、统一替换、成片修复)。使用的是 vs code 中的 codex 插件
- antigravity:我用它里面的 Gemini / Claude 做“页面级、细碎兼容”的问题(一个页面一个页面地抠)
另外我自己主力用的是 GPT 5.2 xhigh:
它在“升级基础组件 + 拉通构建链路”这块特别省心,能把项目从“跑不起来”推到“能启动、能构建”,缺点就是慢,要等。 不过相对整个人工升级耗时来说,codex 速度也算 神速
实操流程:我怎么把一个大项目“喂给 AI”,再把它拉起来
下面基本按我当时的操作顺序写(中间有些步骤我会解释一下为什么这么做)。
1)先让 AI 充分了解项目(别急着改)
我一开始用 codex 的高强度模式,把项目结构、依赖、构建脚本、路由组织方式先过一遍。
目的不是让它“直接开干”,而是让它建立上下文:这是个什么项目、哪里是关键路径、哪些东西不能乱动。
同时也是让我自己对项目有个清晰的认知。
2)跟 AI 把升级方案聊清楚(不清楚就别动代码)
我会强制让它回答这些问题:
- 升级路线是什么?(依赖怎么换、入口怎么改、哪些插件要替代)
- 哪些点是“必炸点”?(Vue2 语法、指令、全局 API、第三方库)
- 每一步完成的验收是什么?(比如必须
yarn dev能启动、路由能进首页)
3)从多个方案里选一个“我能接受的”
AI 往往会给很多选项:激进的、保守的、折中的。
我最后选的是:先把工程骨架升级到 Vue3 并跑通构建,再去处理页面兼容。原因很简单——工程能跑起来,你才有“可迭代”的基础。
4)把方案写进一个升级文档(我叫它 upgradevue3.md)
这一步非常值。
我让 AI 把方案和实施步骤写成文档,后面每一次跑偏、每一次改错,都可以回到这份文档里“对齐目标”。
说白了:让 AI 自己写“施工图”,后面才不会边改边忘。
5)开始动手升级(让 AI 按方案执行)
这一步我交给 codex 先跑一轮大改造:依赖升级、入口改造、路由适配、构建配置等。
6)让 AI 连续干 4~5 小时,把“骨架”先搭出来
codex 那次连续干了四五个小时,停下来的时候,项目已经完成了“最关键的那一跃”:yarn dev 能启动、yarn build 能打包。
对我来说,这一刻基本就能判断:这事儿成了大半。因为只要构建链路通了,剩下就都是“兼容性”和“细节”。
7)启动本地开发,看页面是不是能正常打开
我不会一上来就点所有菜单,那会把自己搞崩溃。
我只看三件事:
- 首页能不能进
- 路由跳转是不是正常
- 控制台是不是成片报错(少量告警我先忍)
8)哪里异常就改哪里(不要同时动太多)
页面级问题我会拆小:一次只处理一类报错,或者一个功能模块。
这样回滚也方便,定位也快。
9)让 AI 判断“现在处在方案的哪一步”
这也是我觉得很实用的一招:
我会让 AI 基于当前代码状态,告诉我“我们现在完成了哪些步骤、基于升级方案下一步该做什么”。
这样不会出现“改着改着忘了目标”。
10)主流程跑通后,剩下就是菜单级验证
到这一步,其实就是体力活:一个个功能点进去看,哪里炸了修哪里。
遇到很多类似问题,直接 叫起 Codex 批量修改。
后半程怎么推进:Gemini / Claude 负责“碎活”,codex 负责“批量修复”
当骨架升级完成后,剩下最多的就是两类问题:
- Vue2 / Vue3 的语法兼容小问题(多且碎),记住 AI 不能一次性处理所有的 语法问题,需要我们自己进行测试验证来排查
- 某些页面控制台有告警/报错,但不一定影响使用
所以我后面改页面时的分工是这样的:
- 页面级问题:用 antigravity 里的 Gemini / Claude 来抠细节(快、准、上下文短)
- 需要批量处理的兼容问题:再把任务丢回 codex,让它做“成片替换、成片修复”
结果:差不多 10 个工作日,项目基本正常
就这样,差不多 10 个工作日,整个项目已经“基本能用”:
- 页面能打开,路由基本正常,功能正常
- 还有少量页面会有控制台告警(不影响使用)
- 偶尔也会有页面报错(就继续修)
我自己的体感是:
**升级工作大概做了 70%**,后面更多是“语法兼容 + 边角料”。
最爽的是第一周:当我看到程序已经能跑、路由能跳、页面能显示的时候,心里那种感觉真的是——
“稳了,这次肯定能成。”
一些很现实的体会(写给也想这么干的人)
别让 AI 直接开干
先让它读懂项目、再跟你对齐方案,否则越改越乱。用
yarn dev/yarn build当闸门
每个阶段都必须过这两关,否则别往下走。“主力模型 + 备用模型”非常有用
有的模型擅长工程级改造,有的擅长修细节。别迷信单一工具。原地升级一定要开分支
这不是建议,是底线。没有分支保护,心态会崩。对于需要替换的组件,让AI给建议
由于大型项目,涉及到的依赖组件会特别多,大概率会碰到一些组件依赖没有适配Vue3,需要更换组件的情况。
这时可以跟AI讨论,项目里遇到使用这些功能组件的替换选择,选一个功能最接近、升级代价最小的组件。
最后聊一句:效率真的会刷新记忆
AI 的效率这件事,我以为自己已经见识过很多次了,但它还是会不断刷新你的印象:
以前要 500 人天的东西,现在两周就能看到一个“能跑起来”的结果——这不是优化,是量级变化。
另外,介绍下文中我用到的订阅:
GPT Plus,以及 Google One(我用的是一个月免费试用)。成本肯定有,但和“重写项目”的成本比起来……你自己算算就明白了。
如果你也在纠结“Vue2 项目到底要不要升 Vue3”,我的建议很简单:
别在脑子里演,找个时间开个分支,让 AI 先把骨架推起来——跑得起来之后,你自然就知道该怎么做了。





