Use Claude to Set Up Your Vite Build Configuration

Vite's defaults work great until they don't. When you need path aliases, environment-specific builds, chunk splitting, or library mode, ask Claude to write the config rather than trawling through docs.

"Write a vite.config.ts for a Vue 3 + TypeScript project:
- Alias @ to ./src
- Proxy /api to http://localhost:8000 in dev only
- Split vendor chunks: vue ecosystem separate from UI library separate from utils
- Inline SVGs as Vue components via vite-svg-loader
- Source maps in production for Sentry error tracking
- Tree-shake lodash-es so only used methods are bundled"

Chunk splitting is the setting most people get wrong — one big vendor bundle means users re-download all unchanged libraries on every deploy. Claude sets up manualChunks with sensible groups and explains the trade-offs between granularity and HTTP request count.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'ui-vendor': ['@headlessui/vue', '@heroicons/vue'],
      }
    }
  }
}

For Laravel + Vite projects, mention you're using laravel-vite-plugin — it adjusts the manifest path, hot reload config, and asset helpers so everything works with Blade templates out of the box.

Vite config drift causes subtle build differences between environments — write it properly once with Claude and version control it.