Vue 2 项目 Webpack 升级到 Vite 构建工具

将 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_* 等环境变量兼容。

Vue 2 项目升级到 Vite 构建工具

重要提示

⚠️ 在开始之前，必须确认用户已经备份了代码或使用了 Git 版本控制！

执行原则

1. 使用 TodoWrite 工具：创建完整的任务列表，实时更新进度
2. 分阶段执行：按照阶段顺序执行，每个阶段完成后标记为完成
3. 遇到问题及时沟通：使用 AskUserQuestion 询问用户
4. 保留业务依赖：只删除 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 创建任务列表，然后依次执行：

1. 分析 package.json（识别业务依赖、Webpack 依赖、需升级依赖）
2. 提取环境变量（从 config/.env.js 转换为 .env. 格式）
3. 检查代理配置（记录 proxyTable）
4. 检查特殊功能（SVG Sprite、JSX、动态路由）
5. 单独审计 axios：核对官方 release/security 公告，避免继续保留已披露漏洞版本；同时排查上传、导出、401/403 拦截和裸 axios 调用

详细步骤见 references/migration-steps.md

---

阶段 2：文件清理与配置

1. 删除 Webpack 相关文件（build/、config/、.babelrc 等）
2. 更新 package.json（添加 type: module，替换 scripts，更新依赖）
3. 创建 vite.config.js（使用 references/vite-config.md 模板）
4. 创建环境变量文件（.env.development、.env.staging、.env.production）

详细步骤见 references/migration-steps.md

---

阶段 3：代码迁移

1. 修改 index.html（移动到根目录，添加 <script type="module">）
2. 修改 main.js（使用 render 函数，导入加 .vue 扩展名）
3. 迁移环境变量：优先使用 import.meta.env；如项目存在并行上线或老分支合并，需要保留 process.env.VUE_APP_* 静态写法兼容层
4. 处理静态资源（static → public，~@ → @，global → window）
5. 修改组件导入（所有 .vue 导入加扩展名）
6. 修复样式（/deep/ 和 >>> → ::v-deep）

详细步骤见 references/migration-steps.md

---

环境变量兼容约定

迁移期如果可能有 Webpack/Vue CLI 写法的需求先合入生产，不要只做 process.env -> import.meta.env 的单向替换。

1. .env.* 中新增变量优先使用 VITE_ 前缀。
2. Vite 代码推荐使用 import.meta.env.VITE_*。
3. Webpack/Vue CLI 历史代码允许继续使用 process.env.VUE_APP_*。
4. 在 vite.config.js 中用 loadEnv(mode, process.cwd(), '') 读取变量，并自动把 VITE_XXX 映射为 process.env.VUE_APP_XXX。
5. 如果 .env.* 已存在 VUE_APP_XXX，也要原样注入为 process.env.VUE_APP_XXX。
6. define 使用精确 key，不整体替换 process.env，减少对第三方库和动态访问的影响。
7. 兼容层只保证静态写法，如 process.env.VUE_APP_BASE_API；不承诺兼容 process.env[key]。

具体配置示例见 references/vite-config.md。

---

阶段 4：测试与验证

1. 安装依赖：pnpm install（冲突时用 --force）
2. 启动开发服务器：pnpm run dev
3. 验证功能：页面显示、样式、图标、路由、API 请求
4. 构建测试：pnpm run build:stage && pnpm run preview

遇到问题查看 references/common-issues.md

---

阶段 5：部署配置（可选）

如需自动化部署，参考 references/deploy-config.md：

1. 创建压缩脚本（export-zip.cjs）
2. 创建 FTP 部署脚本（ftp-deploy.js）
3. 添加部署 NPM 脚本
4. 安装依赖：pnpm add -D archiver ftp-deploy rimraf

---

升级要点速查

类别	修改内容
依赖管理	保留业务依赖，删除 Webpack/Babel，升级 Vue 到 2.7.x；axios 使用当前 1.x 安全补丁版本，不保留已披露漏洞版本
配置文件	创建 vite.config.js 和 .env.* 文件
代码修改	.vue 导入加扩展名，环境变量优先迁移到 import.meta.env，必要时兼容 process.env.VUE_APP_*
语法替换	require → import，global → window，~@ → @
axios 改造	排查 CancelToken、headers.post['Content-Type']、裸 axios 调用、上传下载与登录态拦截