What are the common options in Vite configuration files? How to configure path aliases?

Vite provides various configuration methods to meet different project requirements. Here's a detailed explanation of Vite configuration:

Configuration Files:

Vite automatically loads configuration files from the following locations (in priority order):

1. vite.config.js
2. vite.config.mjs
3. vite.config.ts
4. vite.config.cjs

Basic Configuration Structure:

javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

Common Configuration Options:

Dev Server Configuration (server):

• port: Specify dev server port
• host: Specify server hostname
• open: Auto-open browser on startup
• proxy: Configure proxy to solve CORS issues
• cors: Configure CORS policy
• https: Enable HTTPS

Build Configuration (build):

• outDir: Output directory
• assetsDir: Static assets directory
• sourcemap: Whether to generate source maps
• minify: Minification method (terser, esbuild)
• target: Build target browsers
• rollupOptions: Rollup configuration options
• chunkSizeWarningLimit: Chunk size warning threshold

Path Aliases (resolve.alias):

javascript
resolve: {
  alias: {
    '@': '/src',
    '@components': '/src/components'
  }
}

CSS Configuration (css):

• preprocessorOptions: Preprocessor options
• modules: CSS Modules configuration
• postcss: PostCSS configuration

Dependency Optimization Configuration (optimizeDeps):

• include: Force included dependencies
• exclude: Excluded dependencies
• esbuildOptions: esbuild options

Environment Variables:

Vite supports configuring environment variables through .env files:

• .env: All environments
• .env.development: Development environment
• .env.production: Production environment
• .env.local: Local override

Environment variables must start with VITE_ to be accessible in client code.

Conditional Configuration:

javascript
export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return { /* dev config */ }
  } else {
    return { /* build config */ }
  }
})

TypeScript Support:

Using defineConfig provides full type hints and intelligent code completion.