先声明：重构是在业务空窗期做的，没耽误正常迭代。别学我偷偷干，最好提前报备。
公司项目是个3年前的Vue2后台系统，代码量不大（50多个页面），但"历史悠久"------经历了4任前端，风格各异，没有TypeScript，没有组件库规范，console.log满天飞。
我花了3个周末（周五晚上+周六全天），把它升级到了Vue3 + TS + Vite。不是炫技，是真的被折磨够了。
第一周：搭骨架，解决"能跑"的问题
先用@vue/cli的迁移工具跑了一遍，发现只能解决30%的问题。剩下的手动改：
- Options API → Composition API：这个最痛苦。有些组件逻辑散落在data、computed、methods里，重构时要先理清楚逻辑关系。我的策略是：先不改逻辑，只改写法，保证行为一致。
- Vue Router 3 → 4 ：主要是
router.addRoutes被废弃了，改成router.addRoute。还有导航守卫的写法有变化，但不大。 - Vuex → Pinia：这个反而是最爽的。Pinia的TypeScript支持好太多，不用写那么多类型声明。
周末两天改了20个页面，周一来公司测试，发现有个页面的表单提交后没反应。调试了半天，发现是v-model在Vue3里的默认行为变了------.sync修饰符被移除，我漏改了一个地方。
教训：迁移指南要逐条核对，不能凭记忆。
第二周：上TypeScript，解决"靠谱"的问题
Vue3对TS的支持好了很多，但还是有坑：
- defineComponent的props类型 ：我习惯用接口定义props，但发现如果接口里有可选属性，模板里用的时候会报错。最后改成用
PropType显式声明，或者直接用withDefaults。 - ref的泛型推导 ：
ref(null)默认推导成Ref<null>，如果后面赋值对象会报错。必须显式写ref< User | null>(null)。 - 第三方库的类型 ：有些老库没有@types，要自己写
.d.ts。我攒了一个shims-custom.d.ts，专门放这些。
最爽的时刻：改完后IDE的自动提示终于正常了，之前写代码像瞎子摸象，现在像开了天眼。
第三周：工程化优化，解决"好维护"的问题
- ESLint + Prettier + Husky：以前代码风格看当天心情，现在提交前自动格式化。我配了个比较宽松的规则，太严格会打击积极性。
- 组件自动导入 ：用
unplugin-vue-components，不用手动import组件。但要注意，如果组件名冲突（比如自定义的Button和Element Plus的Button），要显式指定。 - 环境变量管理 ：把开发、测试、生产的API地址、埋点key都抽出来，用
.env文件管理。以前这些硬编码在代码里，改一次发一版，现在改配置就行。
同事为什么来找我要代码？
重构完第二周，隔壁组也要升级Vue3，他们组长直接来拷贝我的配置。我说："其实掘金上有更好的方案..." 他说："你的能跑，我就要你的。"
真实。
重构的价值，不是技术多先进，是"能落地"
我现在觉得，前端工程化的最佳实践，不是用最新技术，是让团队里水平最差的人也能写出合格的代码。ESLint是防呆的，TypeScript是防错的，自动化工具是省时间的。
最后贴一下我的package.json关键依赖版本（供参考）：
JSON
json
{
"vue": "^3.4.0",
"vite": "^5.0.0",
"typescript": "^5.3.0",
"pinia": "^2.1.0",
"vue-router": "^4.2.0"
}想问问大家：
你们公司的项目是什么技术栈？有没有也在考虑升级Vue3的？或者已经踩过坑的，欢迎分享，我帮你避雷。