全部技能 分类浏览
← 返回
未分类

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 + 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_* 等环境变量兼容。
Aries
未分类 community v1.0.2 3 版本 100000 Key: 无需
★ 0
Stars
📥 98
下载
💾 0
安装
3
版本
#latest

概述

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

重要提示

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

前置安全检查

阶段 2 涉及移除 Webpack 旧配置，执行前必须确认：

  1. 当前在项目根目录（ls package.json 存在）
  2. Git 状态干净或业务代码已提交/stash（git status）
  3. 用户已明确确认可以移除旧配置
  4. 在 Git 项目中优先使用可恢复的版本控制方式移除文件；非 Git 项目需先确认备份

执行原则

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

执行流程概览

阶段内容
------------
阶段 1项目分析 - 分析现有项目结构、依赖和配置
阶段 2文件清理与配置 - 删除 Webpack 配置，创建 Vite 配置
阶段 3代码迁移 - 修改代码以适配 Vite
阶段 4测试与验证 - 安装依赖并测试运行
阶段 5部署配置（可选）- 配置自动化部署脚本

参考文档

阶段 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（移动到根目录，添加

    Skill工具集 © 2026