← Back to Skills Marketplace
89
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install vue2-vite-upgrade
Description
将 Vue 2 + Webpack 项目升级到 Vite 构建工具。当用户需要将 Vue 2 项目从 Webpack 迁移到 Vite、优化构建速度、解决 Webpack 配置问题，或处理 Vue CLI/Webpack 与 Vite 环境变量兼容时使用此技能。触发场景包括：(1) 用户提到"升级到 Vite"、...
README (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 调用、上传下载与登录态拦截 |
Usage Guidance
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.
Capability Analysis
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.
Capability Assessment
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.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install vue2-vite-upgrade - After installation, invoke the skill by name or use
/vue2-vite-upgrade - Provide required inputs per the skill's parameter spec and get structured output
Version History
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.
Metadata
Frequently Asked Questions
What is Vue 2 项目 Webpack 升级到 Vite 构建工具?
将 Vue 2 + Webpack 项目升级到 Vite 构建工具。当用户需要将 Vue 2 项目从 Webpack 迁移到 Vite、优化构建速度、解决 Webpack 配置问题，或处理 Vue CLI/Webpack 与 Vite 环境变量兼容时使用此技能。触发场景包括：(1) 用户提到"升级到 Vite"、... It is an AI Agent Skill for Claude Code / OpenClaw, with 89 downloads so far.
How do I install Vue 2 项目 Webpack 升级到 Vite 构建工具?
Run "/install vue2-vite-upgrade" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Vue 2 项目 Webpack 升级到 Vite 构建工具 free?
Yes, Vue 2 项目 Webpack 升级到 Vite 构建工具 is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Vue 2 项目 Webpack 升级到 Vite 构建工具 support?
Vue 2 项目 Webpack 升级到 Vite 构建工具 is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Vue 2 项目 Webpack 升级到 Vite 构建工具?
It is built and maintained by Aries (@yyyyzj); the current version is v1.0.0.
More Skills