Vue2升级Vue3该用什么工具？怎么选怎么操作？

公司项目还在用Vue2，想升级Vue3但怕成本太高，手动改代码太麻烦？其实Vue生态里有不少专门的工具能帮我们“无痛”迁移，从构建工具到代码自动转换，再到状态管理适配，选对工具组合能把升级难度砍半，今天就唠唠Vue2升Vue3有哪些实用工具,不同项目该咋选咋操作～

官方都给了哪些“保底”迁移工具？

Vue团队很懂开发者痛点，专门出了迁移构建（Migration Build）和代码扫描工具，先从最基础的说起：

迁移构建（@vue/compat）：让新旧代码“和平共处”

如果项目特别大，直接全量替换Vue版本风险高，迁移构建就是“过渡神器”，它本质是个兼容包，装了之后Vue2和Vue3的代码能在同一个项目里跑，甚至老组件用Vue2写法、新组件用Vue3写法也不冲突。

实操步骤特简单：

1. 先把package.json里的vue版本改成^3.0.0，然后装兼容包：npm install vue@3 @vue/compat；
2. 在入口文件（比如main.js）里，原来用Vue构造函数的地方，换成createApp创建实例（像Vue.use()改成app.use()）；
3. 如果是Webpack或Vue CLI项目，还要在vue-loader里配置兼容模式（比如Vue CLI的vue.config.js里，给vue-loader加compatConfig: { MODE: 3 }，让代码更贴近Vue3行为）。

这样改完，项目能先跑起来，之后再慢慢替换老组件——比如把filter（Vue3移除了）换成computed，把$children（Vue3不推荐用）换成refs，每次迭代改一点，风险特别低。

代码扫描工具：自动揪出Vue2专属API

手动找代码里的Vue2 API（比如$on、$off、Vue.filter这些）太费眼，官方和社区做了codemod脚本，能自动扫描+修改代码，比如社区的vue-3-codemods，装完后用命令行跑一下，它能：

• 把Vue.prototype.$http自动改成app.config.globalProperties.$http（Vue3全局属性要这么挂）；
• 把Vuex的mapState/mapGetters语法，提前改成Pinia风格（虽然不完全等价，但能减少后续迁移工作量）；
• 识别并标记即将废弃的API（比如Vue.directive要换成app.directive）。

用法也不难：先全局装jscodeshift和codemod工具，再用命令指定要扫描的目录，比如jscodeshift -t node_modules/vue-3-codemods/transforms/vue-prototype.js src/components，跑完之后再手动检查下，基本能解决80%的重复劳动。

构建工具换Vite还是留Vue CLI？

Vue2时代大家常用Vue CLI（基于Webpack），但Vue3更推荐用Vite（基于ESModule），这俩咋选？得看项目情况：

选Vite：中小型项目“一步到位”

Vite最大优势是快——开发时按需编译，不用等Webpack全量打包，启动速度和热更新速度能提升好几倍，如果项目是中小型，依赖没那么复杂，直接换Vite爽翻天：

1. 先装Vite和Vue3插件：npm install vite @vitejs/plugin-vue；
2. 把原来的vue.config.js换成vite.config.js，配置别名、CSS预处理器这些（比如把指向src目录，和Vue CLI保持一致）；
3. 调整入口：原来的index.html在public里，现在要放到项目根目录，里面引入main.js改成；
4. 处理依赖：如果有Webpack专属插件（比如html-webpack-plugin），换成Vite的插件（比如vite-plugin-html），或者手动实现功能。

举个例子：之前用Vue CLI配的less-loader，Vite里只要装less就行，它会自动处理less文件，不用再写一堆loader配置，省心多了～

留Vue CLI：大型项目“缓兵之计”

如果项目特别大，直接换Vite怕踩坑，先留着Vue CLI也能过渡，步骤是：

1. 把Vue CLI升级到最新版（支持Vue3的compat模式）；
2. 在vue.config.js里配置vue-loader的兼容模式（和迁移构建配合），让老代码能跑；
3. 逐步把新组件用Vite开发（比如开个新分支，用Vite建子项目），等团队熟悉Vite后，再全量替换构建工具。

不过长远来看，Vite是趋势，因为Vue3的单文件组件（SFC）特性（比如