Vite 配置速查 — 60+ 个 vite.config.ts 选项附默认值与示例

server: {
  port: 3000,
}

server: {
  host: true,      // same as '0.0.0.0'
}

server: {
  open: true,
  // or: open: '/dashboard',
}

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
    '/ws': {
      target: 'ws://localhost:3001',
      ws: true,
    },
  },
}

server: {
  cors: true,
  // or fine-grained:
  // cors: {
  //   origin: 'https://example.com',
  //   methods: ['GET', 'POST'],
  // },
}

server: {
  hmr: {
    protocol: 'ws',
    host: 'localhost',
    port: 5173,
  },
}

server: {
  headers: {
    'Cross-Origin-Opener-Policy': 'same-origin',
    'Cross-Origin-Embedder-Policy': 'require-corp',
  },
}

server: {
  port: 3000,
  strictPort: true,
}

preview: {
  port: 8080,
  open: true,
}

build: {
  target: 'es2020',
  // or: target: ['chrome87', 'firefox78', 'safari14'],
}

build: {
  outDir: 'dist',
}

build: {
  assetsDir: 'static',   // outputs to dist/static/
}

build: {
  emptyOutDir: true,
}

build: {
  minify: 'esbuild',    // fast (default)
  // minify: 'terser',  // smaller, slower
  // minify: false,     // disable for debugging
}

build: {
  sourcemap: true,
  // or 'inline' | 'hidden'
}

build: {
  rollupOptions: {
    external: ['react', 'react-dom'],
    output: {
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
      manualChunks: {
        vendor: ['lodash', 'axios'],
      },
    },
  },
}

build: {
  lib: {
    entry: 'src/index.ts',
    name: 'MyLib',
    fileName: 'my-lib',
    formats: ['es', 'cjs'],
  },
  rollupOptions: {
    external: ['react', 'react-dom'],
  },
}

build: {
  cssCodeSplit: true,   // default, split per chunk
  // cssCodeSplit: false,  // one CSS file
}

build: {
  assetsInlineLimit: 8192,   // 8 KB
  // assetsInlineLimit: 0,   // never inline
}

build: {
  chunkSizeWarningLimit: 1000,   // 1 MB
}

build: {
  copyPublicDir: false,   // useful for library builds
}

import path from 'path';
import { defineConfig } from 'vite';

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

resolve: {
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
}

resolve: {
  conditions: ['module', 'browser'],
}

resolve: {
  dedupe: ['react', 'react-dom'],
}

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

export default defineConfig({
  plugins: [
    react(),
  ],
});

export default defineConfig(({ command, mode }) => ({
  plugins: [
    react(),
    mode === 'production' && vitePWA(),  // only in prod
    command === 'build' && bundleAnalyzer(),
  ].filter(Boolean),
}));

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  return {
    build: {
      sourcemap: command === 'serve',   // sourcemap in dev only
    },
  };
});

define: {
  __APP_VERSION__: JSON.stringify('1.2.3'),
  __FEATURE_FLAG__: true,
}

export default defineConfig({
  base: '/my-app/',   // deployed to example.com/my-app/
});

css: {
  modules: {
    localsConvention: 'camelCaseOnly',
    generateScopedName: '[name]__[local]__[hash:5]',
  },
}

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@use "@/styles/variables" as *;',
    },
    less: {
      globalVars: {
        primaryColor: '#1890ff',
      },
    },
  },
}

import autoprefixer from 'autoprefixer';

css: {
  postcss: {
    plugins: [
      autoprefixer(),
    ],
  },
}

css: {
  devSourcemap: true,
}

optimizeDeps: {
  include: ['lodash-es', 'some-cjs-dep > nested-dep'],
}

optimizeDeps: {
  exclude: ['@ffmpeg/ffmpeg', 'some-esm-native-dep'],
}

optimizeDeps: {
  force: true,  // ⚠ temporary only, don't commit
}

esbuild: {
  jsxInject: `import React from 'react'`,
  drop: ['console', 'debugger'],  // prod only
  target: 'es2020',
}

ssr: {
  noExternal: ['some-esm-only-package', /^@my-org//],
}