← 返回 Skills 市场

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

Name: Vue 2 项目 Webpack 升级到 Vite 构建工具
Author: yyyyzj

作者 Aries · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ⚠ suspicious

总下载

当前安装

版本数

在 OpenClaw 中安装

/install vue2-vite-upgrade

功能描述

将 Vue 2 + Webpack 项目升级到 Vite 构建工具。当用户需要将 Vue 2 项目从 Webpack 迁移到 Vite、优化构建速度、解决 Webpack 配置问题，或处理 Vue CLI/Webpack 与 Vite 环境变量兼容时使用此技能。触发场景包括：(1) 用户提到"升级到 Vite"、...

使用说明 (SKILL.md)

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

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

环境变量兼容约定

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

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

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

阶段 4：测试与验证

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

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

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

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

创建压缩脚本（export-zip.cjs）
创建 FTP 部署脚本（ftp-deploy.js）
添加部署 NPM 脚本
安装依赖：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` 调用、上传下载与登录态拦截

安全使用建议

This skill appears safe to use as a migration checklist, but apply it like a code-changing assistant: start from a clean Git commit or backup, review every deletion and package change, avoid putting secrets in frontend environment files, and treat the optional FTP deployment script as sensitive production-access code.

功能分析

Type: OpenClaw Skill Name: vue2-vite-upgrade Version: 1.0.0 The skill bundle facilitates Vue 2 to Vite migration using high-risk operations including recursive file deletion, bulk source code refactoring via shell commands (`sed` in `migration-steps.md`), and automated FTP deployment (`ftp-deploy.js`). While these capabilities are aligned with the stated purpose and the documentation includes security-conscious advice regarding axios CVEs (e.g., CVE-2025-27152), the reliance on broad shell execution and plaintext credential templates in `deploy-config.md` presents a significant attack surface for the OpenClaw agent.

能力评估

ℹ Purpose & Capability

The skill’s instructions are aligned with migrating a Vue 2 + Webpack project to Vite, including dependency updates, config changes, source edits, and validation steps.

ℹ Instruction Scope

The workflow includes destructive and broad project mutations such as deleting Webpack directories, removing lockfiles, and running bulk replacements, but it also tells the user to confirm backup or Git version control first.

ℹ Install Mechanism

There is no skill install code, but the migration instructions ask the user to install and update project dependencies, sometimes with version ranges and optional force installation.

ℹ Credentials

The skill reads and rewrites frontend environment variables for Vite compatibility, which is expected for this migration, but users should avoid placing secrets in frontend .env files.

ℹ Persistence & Privilege

The optional deployment guide includes FTP deployment scripts with credential placeholders and production upload commands; these are user-directed, but should be treated carefully.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install vue2-vite-upgrade
安装完成后，直接呼叫该 Skill 的名称或使用 /vue2-vite-upgrade 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release – provides a comprehensive guide and step-by-step workflow for migrating Vue 2 + Webpack projects to Vite. - Outlines five migration phases: project analysis, file/config cleaning, code migration, testing/validation, and optional deployment setup. - Details environment variable compatibility and upgrade best practices. - Emphasizes maintaining Git backups and clear user communication during the upgrade process. - Includes reference links for common issues, migration steps, and configuration examples. - Specifies key changes in dependency management, config files, code adaptations, and axios security review.

元数据

Slug vue2-vite-upgrade

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题