About this skill

Problem

Vue 2 projects that have lived with Webpack for a long time often end up with slow development startup, build logic split across build/ and config/, environment access tied to process.env.VUE_APP_*, and inconsistent asset paths, component imports, and style selectors. Replacing Webpack with Vite without a careful audit can break routing, proxies, deep selectors, and third-party integrations.

How It Works

The skill proceeds through analysis, cleanup, migration, validation, and optional deployment. It starts by reading package.json, separating business dependencies from Webpack/Babel dependencies, and checking proxies, SVG sprites, JSX, dynamic routes, and other project-specific behavior. It also audits axios usage, including version safety, request interceptors, upload/export flows, and bare axios calls. It then removes old build files, adds vite.config.js and .env.* files, and migrates project conventions such as static, ~@, global, and explicit .vue imports. For legacy code, it prefers import.meta.env while still preserving static process.env.VUE_APP_* access where needed, reducing the risk of breaking parallel branches during integration. Finally, it validates the result through dev server behavior, build output, and core page functionality.

Boundaries

This is best for upgrading existing Vue 2 projects from Webpack or Vue CLI to Vite, not for a full rewrite or a Vue 3 migration. A Git history or reliable backup is required before file removal. Projects with dynamic process.env[key] access, heavily customized loaders, or tightly coupled deployment pipelines may need extra manual review.

Screenshots

Use Cases

Maintain a Vue 2 Webpack project, remove old build and config folders, and enable the Vite dev server.
Keep static process.env.VUE_APP_* access while adding VITE_ variables and mapping them in Vite.
Migrate static assets from static to public and fix .vue imports, deep selectors, and proxy rules.
Run pnpm run build:stage and preview before release to verify pages, routes, APIs, and icons.

Best For

Frontend engineers maintaining Vue 2 admin dashboards who want to switch to Vite without rewriting business logic.
Senior engineers taking over legacy Vue CLI projects who need to clean Webpack/Babel dependencies and verify env compatibility.
Platform engineers owning release pipelines who need to validate Vite builds and configure optional FTP deploy scripts.
Frontend leads refactoring legacy systems who need to audit axios interceptors, uploads, auth flows, and dependency versions.