Vite的常见配置选项详细说明

目录

• 选项详细说明
• base: 配置基础路径
• build: 构建选项
• server: 开发服务器配置
• preview: 预览服务器配置
• css: CSS 相关配置
• resolve: 解析选项
• esbuild: ESBuild 配置
• assetsInclude: 指定静态资源文件类型
• define: 定义全局常量替换
• logLevel: 日志级别
• envPrefix: 环境变量前缀
• json: JSON 配置
• worker: Worker 配置
• 总结 

import { defineConfig } from 'vite'

export default defineConfig({
  // 基础路径
  base: '/',
  
  // 输出目录
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    sourcemap: false,
    rollupOptions: {
      input: 'src/main.js',
      output: {
        // 可以配置输出选项
      },
    },
    minify: 'esbuild', // 'terser' 或者 false
    chunkSizeWarningLimit: 500,
    emptyOutDir: true,
    manifest: false,
    ssrManifest: false,
    target: 'modules',
  },
  
  // 开发服务器配置
  server: {
    host: 'localhost',
    port: 3000,
    strictPort: false,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://backend.api',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    },
    cors: true,
    hmr: true, // 热模块替换
  },
  
  // 预览服务器配置
  preview: {
    host: 'localhost',
    port: 5000,
    strictPort: false,
    https: false,
    open: true,
    cors: true,
  },
  
  // 插件
  plugins: [
    // 在这里添加插件
  ],
  
  // CSS 相关配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    },
    postcss: {
      plugins: [
        // PostCSS 插件
      ]
    },
  },
  
  // 解析配置
  resolve: {
    alias: {
      '@': '/src',
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },
  
  // ESBuild 配置
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import React from 'react'`,
    minify: true,
  },
  
  // 静态资源处理
  assetsInclude: ['**/*.gltf'],

  // 定义全局常量替换
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
  },
  
  // 日志级别
  logLevel: 'info', // 'info', 'warn', 'error', 'silent'

  // 环境变量前缀
  envPrefix: 'VITE_',

  // JSON 配置
  json: {
    namedExports: true,
    stringify: false,
  },

  // Worker 配置
  worker: {
    format: 'iife',
    plugins: []
  }
})