Vue.js: Vite Configuration

# Webpack project cold start
$ npm run dev
> Project is running at http://localhost:8080
> Compiled successfully in 28.5s  ← 30 seconds of waiting

# Vite project cold start
$ npm run dev
> VITE v5.4.0  ready in 487 ms  ← only 0.5 seconds
> Local: http://localhost:5173/

Development mode (dev):
  - Uses native ESM; the browser imports modules directly
  - Compiles on demand (a module is compiled on first access)
  - Extremely fast HMR (only the changed module is updated)

Production mode (build):
  - Bundles with Rollup
  - Automatic tree-shaking / code splitting / minification
  - Outputs to the dist/ directory

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  // Project root (defaults to process.cwd())
  root: '.',
  
  // Base public path
  base: '/',
  
  // Plugins
  plugins: [vue()],
  
  // Dev server
  server: {
    port: 5173,
    open: true,  // open the browser automatically
    host: '0.0.0.0'  // reachable on the LAN
  },
  
  // Build
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild'
  },
  
  // CSS
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  
  // Path aliases
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

export default defineConfig({
  // 1. Path aliases (the most used)
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@stores': path.resolve(__dirname, 'src/stores')
    }
  },
  
  // 2. Dev server
  server: {
    port: 5173,
    open: true,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  
  // 3. CSS preprocessors
  css: {
    preprocessorOptions: {
      scss: { /* ... */ },
      less: { /* ... */ }
    }
  },
  
  // 4. Build optimization
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    },
    chunkSizeWarningLimit: 1500
  },
  
  // 5. Dependency optimization
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  }
})

# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=My App (Dev)

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My App

# .env.local (git-ignored, one per developer)
VITE_API_KEY=secret-key

// src/env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_API_KEY?: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

const apiUrl = import.meta.env.VITE_API_BASE_URL
const title = import.meta.env.VITE_APP_TITLE

First render: title is My App (Dev), API base is http://localhost:3000, and "🛠 Dev build: debug panel visible (HMR connected)" is shown.
After clicking "Switch build mode": the title becomes My App, the API base becomes https://api.example.com, the debug panel disappears and the prod message appears.
Same as real Vite: values are replaced by literals at build time, and the dev branch of the v-if is dropped entirely from the production bundle.

# .env.development (development)
VITE_API_BASE_URL=http://localhost:3000

# .env.production (production)
VITE_API_BASE_URL=https://api.example.com

# .env.local (local, not committed to Git)
VITE_API_KEY=secret

// src/env.d.ts (TypeScript declarations)
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_API_KEY?: string
}

// Use it in .vue / .ts files
const apiUrl = import.meta.env.VITE_API_BASE_URL

With npm run dev the value of apiUrl is http://localhost:3000;
with npm run build it is https://api.example.com.
Variables without the VITE_ prefix (and values from .env.local when it exists) are replaced during the build, and Volar offers autocompletion for both keys through src/env.d.ts.

dev   → import.meta.env.VITE_API_BASE_URL === 'http://localhost:3000'
build → import.meta.env.VITE_API_BASE_URL === 'https://api.example.com'
.env.local overrides both when present (regardless of mode)

npm install -D sass

// src/styles/variables.scss
$primary: #42b883;
$danger: #ef4444;
$font-size-base: 14px;
$border-radius: 4px;

// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      // Injected into every .scss file automatically
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}

// Usable directly in any .scss file
.button {
  background: $primary;  /* no @import needed */
  color: white;
  border-radius: $border-radius;
}

npm install -D unplugin-auto-import

// vite.config.ts
import AutoImport from 'unplugin-auto-import'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',  // type declarations
      eslintrc: {
        enabled: true  // generates .eslintrc-auto-import.json
      }
    })
  ]
})

<script setup>
// ✅ No more import of ref / computed / watch
const count = ref(0)
const double = computed(() => count.value * 2)
watch(count, (val) => console.log(val))

// ✅ No more useRouter import
const router = useRouter()
</script>

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'echarts-vendor': ['echarts', 'vue-echarts'],
        'utils': ['axios', 'dayjs']
      }
    }
  }
}

build: {
  rollupOptions: {
    treeshake: {
      moduleSideEffects: 'no-external',  // treat all modules as side-effect free
      propertyReadSideEffects: false     // treat property reads as side-effect free
    }
  }
}

build: {
  cssMinify: 'lightningcss',  // 10x faster than esbuild
  // or 'esbuild' (the default)
}

build: {
  assetsInlineLimit: 4096,  // assets < 4KB are inlined (base64)
  rollupOptions: {
    output: {
      assetFileNames: 'assets/[name]-[hash][extname]',
      chunkFileNames: 'js/[name]-[hash].js',
      entryFileNames: 'js/[name]-[hash].js'
    }
  }
}

build: {
  sourcemap: true,  // generate them in production too (for Sentry)
  rollupOptions: {
    output: {
      sourcemapExcludeSources: true  // do not inline the source into the map
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')   // @ → src/
    }
  },

  server: {
    port: 5173, open: true,                 // open the browser on start
    proxy: {
      '/api': {
        target: 'http://localhost:3000',    // proxy forwarding
        changeOrigin: true
      }
    }
  },

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },

  build: {
    outDir: 'dist', sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: { 'vue-vendor': ['vue', 'vue-router', 'pinia'] }
      }
    }
  }
})

No page is rendered; this is a build-time config file.
When you run npm run dev, Vite prints VITE v5.x.x ready in ...
ms plus Local: http://localhost:5173/, the browser opens automatically, @/...
imports resolve to src/..., requests to /api/* are forwarded to http://localhost:3000, and npm run build writes hashed bundles plus source maps into dist/.

$ npm run dev
  VITE v5.4.0  ready in 487 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.10:5173/
  [proxy] /api/products → http://localhost:3000/api/products

$ npm run build
  dist/index.html
  dist/assets/index-8f3a1c.css
  dist/js/vue-vendor-2b7d9e.js
  dist/js/index-4c1a06.js
  dist/js/index-4c1a06.js.map