Migrating From Vue CLI to Vite
summary
Step-by-step migration from Vue CLI to Vite: remove vue-cli plugins and webpack loaders, install Vite and plugin-vue (or community plugin for Vue 2), replace sass-loader with the preprocessor, copy a minimal vite.config.js with resolve.alias for @, move index.html to project root and import /src/main.js, change scripts to use npm run dev and vite build / vite preview, convert process.env to import.meta.env, add .vue extensions, expect instant HMR and esbuild 0.33s benchmark but watch for custom webpack configs and circular dependencies.
AI-written summary · about
chapters (13)
- 0:00Introduction and speaker intro
- 2:13Why migrate to Vite
- 9:11Nine-step migration process
- 12:01Step 1: Update dependencies
- 15:13Step 2: Modern browser support
- 18:23Step 3: Configure Vite
- 20:32Step 4: Move index.html
- 22:22Step 5: Update scripts
- 24:10Step 6: Environment variables
- 26:58Step 7: Add .vue extensions
- 28:23Step 8: Clean up magic comments
- 33:41View School resources
- 34:42Q&A on migration challenges
