核心用法
该技能为 Vue 2 + Webpack 项目迁移至 Vite 构建工具提供标准化、可复现的完整流程，涵盖从项目分析、配置迁移到测试验证的五阶段执行框架。
执行流程：
1. 阶段1-项目分析：审计 package.json 识别业务依赖与 Webpack 依赖，提取环境变量，检查代理配置与特殊功能（SVG Sprite、JSX 等），并单独审计 axios 安全版本；
2. 阶段2-文件清理与配置：删除 Webpack/Babel 相关文件（build/、config/、.babelrc 等），更新 package.json（添加 "type": "module"），创建 vite.config.js 与环境变量文件；
3. 阶段3-代码迁移：将 index.html 移至根目录并添加 module script，修改 main.js 使用 render 函数，统一 .vue 导入添加扩展名，迁移环境变量至 import.meta.env 并保留 process.env.VUE_APP_* 兼容层，处理静态资源路径映射，将 /deep/ 替换为 ::v-deep；
4. 阶段4-测试与验证：优先使用 pnpm 安装，验证开发服务器与生产构建；
5. 阶段5-部署配置（可选）：创建压缩与 FTP 部署脚本，凭证通过环境变量传入。
显著优点：
- 构建性能飞跃：Vite 基于原生 ESM 的 Dev Server 与 Rollup 预构建，冷启动与热更新速度较 Webpack 提升 10-100 倍；
- 配置极简：vite.config.js 通常仅需数十行，告别 Webpack 复杂 loader/plugin 链；
- 现代化开发体验：即时的模块热更新（HMR）、清晰的错误提示、原生 TypeScript 支持；
- 环境变量兼容方案：独创的
VITE_*↔process.env.VUE_APP_*双向兼容层，支持新旧代码并行上线与老分支合并，降低迁移风险； - 安全审计嵌入：强制 axios 版本审计与 Git 备份检查，减少技术债务与安全漏洞。
潜在缺点或局限性：
- Vue 2 生态限制：Vite 对 Vue 2 的支持依赖
@vitejs/plugin-vue2，部分 Vue 2 特有功能（如某些编译时特性）可能不如 Vue CLI 完善； - 插件生态差异：Webpack 丰富的 loader/plugin 生态在 Vite 中需寻找替代品或自行适配，如复杂的自定义 webpack-chain 配置迁移成本较高；
- CJS/ESM 混用陷阱：迁移期需处理
require/module.exports与 ESM 的混用，Node.js 原生模块与浏览器环境的差异可能引发运行时错误； - 环境变量动态访问限制：兼容层仅支持静态写法
process.env.VUE_APP_BASE_API，不支持process.env[key]动态访问； - 删除操作不可逆：阶段2包含
rm -rf/git rm操作，虽有 Git 保护机制，但非 Git 项目存在误删风险。
适合人群：
- 受困于 Webpack 构建慢、热更新慢、配置复杂的 Vue 2 项目团队；
- 需要现代化构建工具但暂无法升级到 Vue 3 的存量项目维护者；
- 希望优化开发体验、降低 CI/CD 构建耗时的前端工程师。
常规风险：
- 依赖版本冲突：peer dependency 问题可能导致安装失败，需手动排查或使用
--force（但会破坏 lockfile）； - 第三方库兼容性：部分依赖 Webpack 特定 API（如
require.context）的库需额外适配； - 样式作用域语法：
/deep/与>>>需全局替换为::v-deep，遗漏将导致样式穿透失效； - 部署凭证泄露：阶段5虽强调环境变量传入凭证，但历史项目中硬编码习惯可能遗留风险；
- axios 安全漏洞：未按指南升级至 1.x 安全版本，或遗留裸调用、错误拦截写法，可能引入已知 CVE。