Migrating Legacy Vue 2 from Webpack 2 to Vite: A Technical Guide

Migrando uma Aplicação Vue 2 Legada de Webpack 2 para Vite: Um Guia Prático Baseado em Problemas Reais

Engineer Camila Rody details the migration of a legacy Vue 2 system from Webpack 2 to Vite. The process focuses on maintaining functionality while removing obsolete loaders and discontinued libraries.

Why This Matters

Most migration guides assume ideal scenarios with modern dependencies and recent Node versions. In reality, legacy enterprise applications often rely on silent Webpack behaviors—such as specific polyfills and dynamic require patterns—that cause systemic failures when replaced by the static analysis required by Vite.

Key Insights

• Node Version Stability: Updating Node and changing bundlers simultaneously obscures the root cause of failures; the author recommends stabilizing Node first before introducing Vite.
• Static Analysis vs. Dynamic Requires: Vite cannot resolve paths generated at runtime via require(), necessitating a shift to import.meta.glob() for dynamic component loading.
• Environment Variable Transition: Transitioning from process.env (Webpack) to import.meta.env (Vite) requires prefixing variables with VITE_ to ensure they are exposed to the frontend.
• CommonJS Compatibility: Legacy libraries using module.exports may require explicit optimization via the optimizeDeps.include configuration in Vite.

Working Examples

Basic vite.config.js setup for Vue 2 applications.

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  plugins: [
    createVuePlugin()
  ]
})

Converting dynamic require calls to Vite’s glob import system.

// Before (Webpack)
const component = require(`./pages/${pageName}.vue`)

// After (Vite)
const pages = import.meta.glob('./pages/*.vue')
const component = pages[`./pages/${pageName}.vue`]

Implementing path aliases in Vite to match Webpack configurations.

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  }
})

Practical Applications

• • Use Case: Parallel Bundler Execution (Running both webpack-dev-server and vite scripts) to compare behavior and enable instant rollbacks.
• Pitfall: Immediate replacement of Webpack without auditing .babelrc or loaders, leading to untraceable production bugs in assets like SVGs or fonts.
• • Use Case: CommonJS Wrapper implementation for abandoned libraries that do not support ES modules.
• Pitfall: Overlooking missing polyfills (e.g., Buffer or global is not defined), which typically only surface during deep functional testing after the initial build succeeds.

References:

• https://dev.to/camilasrody/migrando-uma-aplicacao-vue-2-legada-de-webpack-2-para-vite-um-guia-pratico-baseado-em-problemas-1k1e