Vue 2 项目 Webpack 升级到 Vite 构建工具 — Vue 2 項目使用 Vite 取代 Webpack 作為構建工具升級
v1.0.0将 Vue 2 + Webpack 项目升级到 Vite 构建工具。当用户需要将 Vue 2 项目从 Webpack 迁移到 Vite、优化构建速度、解决 Webpack 配置问题，或处理 Vue CLI/Webpack 与 Vite 环境变量兼容时使用此技能。触发场景包括：(1) 用户提到"升级到 Vite"、"迁移到 Vite"、"Webpack 转 Vite"；(2) 用户抱怨 Webpack 构建慢、热更新慢；(3) 用户想要现代化 Vue 2 项目的构建工具；(4) 用户遇到 Webpack 配置复杂难以维护的问题；(5) 用户询问如何提升 Vue 2 项目的开发体验；(6) 用户提到 process.env、VUE_APP_*、import.meta.env、VITE_* 等环境变量兼容。
by 运行时依赖
安装命令
点击复制技能文档
Vue 2 项目升级到 Vite 构建工具 重要提示 在开始之前，必须确认用户已经备份了代码或使用了 Git 版本控制！
执行原则 使用 TodoWrite 工具：创建完整的任务列表，实时更新进度 分阶段执行：按照阶段顺序执行，每个阶段完成后标记为完成 遇到问题及时沟通：使用 AskUserQuestion 询问用户 保留业务依赖：只删除 Webpack/Babel 相关依赖
执行流程概览 阶段 内容 阶段 1 项目分析 - 分析现有项目结构、依赖和配置 阶段 2 文件清理与配置 - 删除 Webpack 配置，创建 Vite 配置 阶段 3 代码迁移 - 修改代码以适配 Vite 阶段 4 测试与验证 - 安装依赖并测试运行 阶段 5 部署配置（可选）- 配置自动化部署脚本
参考文档 Vite 配置模板：见 references/vite-config.md 常见问题处理：见 references/common-issues.md 部署配置：见 references/deploy-config.md
阶段 1：项目分析 使用 TodoWrite 创建任务列表，然后依次执行： 分析 package.json（识别业务依赖、Webpack 依赖、需升级依赖） 提取环境变量（从 config/.env.js 转换为 .env. 格式） 检查代理配置（记录 proxyTable） 检查特殊功能（SVG Sprite、JSX、动态路由） 单独审计 axios：核对官方 release/security 公告，避免继续保留已披露漏洞版本；同时排查上传、导出、401/403 拦截和裸 axios 调用 详细步骤见 references/migration-steps.md
阶段 2：文件清理与配置 删除 Webpack 相关文件（build/、config/、.babelrc 等） 更新 package.json（添加 type: module，替换 scripts，更新依赖） 创建 vite.config.js（使用 references/vite-config.md 模板） 创建环境变量文件（.env.development、.env.staging、.env.production） 详细步骤见 references/migration-steps.md
阶段 3：代码迁移 修改 index.html（移动到根目录，添加