Vite 常用配置详解

Vite 是一个现代化的前端构建工具，相比 Webpack 具有更快的开发服务器启动和热更新速度。以下是 Vite 的常用配置项及其说明：

1. 基础配置 (vite.config.js)

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

export default defineConfig({
  // 基础公共路径
  base: '/',
  
  // 项目根目录（index.html所在位置）
  root: process.cwd(),
  
  // 插件配置
  plugins: [
    vue(), // Vue插件
    react() // React插件
  ],
  
  // 模式配置
  mode: 'development', // 或 'production'
  
  // 环境变量配置文件
  envDir: './env',
  
  // 定义全局常量替换方式
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0')
  }
})

2. 服务器配置 (server)

export default defineConfig({
  server: {
    host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址
    port: 3000, // 指定开发服务器端口
    open: true, // 自动在浏览器中打开应用
    cors: true, // 启用 CORS
    strictPort: true, // 端口被占用则直接退出
    
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    
    // 热更新配置
    hmr: {
      overlay: false // 禁用错误覆盖层
    }
  }
})

3. 构建配置 (build)

export default defineConfig({
  build: {
    // 构建输出目录
    outDir: 'dist',
    
    // 静态资源目录
    assetsDir: 'assets',
    
    // 小于此阈值的资源将内联为 base64
    assetsInlineLimit: 4096,
    
    // 是否生成 sourcemap 文件
    sourcemap: true,
    
    // 代码拆分策略
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        },
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    },
    
    // 最小化混淆
    minify: 'terser',
    
    // Terser 配置
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    
    // 是否生成 manifest 文件
    manifest: false,
    
    // 是否生成预加载指令
    reportCompressedSize: true
  }
})

4. 解析配置 (resolve)

import path from 'path'

export default defineConfig({
  resolve: {
    // 别名配置
    alias: {
      '@': path.resolve(__dirname, './src'),
      'components': path.resolve(__dirname, './src/components')
    },
    
    // 导入时省略的扩展名
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

5. CSS 配置 (css)

export default defineConfig({
  css: {
    // CSS 预处理器配置
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        math: 'always'
      }
    },
    
    // CSS 模块配置
    modules: {
      scopeBehaviour: 'local',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    },
    
    // PostCSS 配置
    postcss: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
})

6. 环境变量配置 (.env 文件)

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

// 使用环境变量
console.log(import.meta.env.VITE_APP_TITLE)

7. 优化依赖配置 (optimizeDeps)

export default defineConfig({
  optimizeDeps: {
    // 预构建的依赖项
    include: [
      'vue',
      'vue-router',
      'lodash-es'
    ],
    
    // 排除的依赖项
    exclude: ['vue-demi'],
    
    // 强制预构建
    force: true
  }
})

8. Worker 配置

export default defineConfig({
  worker: {
    format: 'es', // worker 输出格式
    plugins: [] // worker 插件
  }
})

9. SSR 配置

export default defineConfig({
  ssr: {
    // SSR 外部化依赖
    external: ['react', 'react-dom'],
    
    // SSR 不外部化依赖
    noExternal: ['@vueuse/core']
  }
})

10. 自定义插件示例

const myPlugin = () => ({
  name: 'my-plugin',
  config(config) {
    // 修改配置
  },
  transform(code, id) {
    // 转换代码
  }
})

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

11. 多页面应用配置

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        admin: path.resolve(__dirname, 'admin.html')
      }
    }
  }
})

12. 性能优化配置

export default defineConfig({
  build: {
    // 启用 brotli 压缩大小报告
    brotliSize: true,
    
    // 分块大小警告限制
    chunkSizeWarningLimit: 1000,
    
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true
  }
})

13. 全局变量替换

export default defineConfig({
  esbuild: {
    // 全局变量替换
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    },
    
    // JSX 配置
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

14. 自定义中间件

export default defineConfig({
  server: {
    middlewareMode: true,
    configureServer: (server) => {
      server.middlewares.use((req, res, next) => {
        // 自定义中间件逻辑
        next()
      })
    }
  }
})

15. 测试配置

export default defineConfig({
  test: {
    // 测试环境配置
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.js'
  }
})

Vite 的配置相比 Webpack 更加简洁高效，特别适合现代前端项目开发。根据项目需求，可以灵活组合上述配置项。