条件配置与异步配置

Vite 配置可使用函数形式，根据环境动态返回不同配置，实现更灵活的项目配置管理。

函数形式配置

JavaScript

import { defineConfig } from 'vite'

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    // 开发环境配置
    return {
      server: {
        port: 3000
      }
    }
  } else {
    // 生产构建配置
    return {
      build: {
        minify: 'terser'
      }
    }
  }
})

参数说明

参数	说明
command	serve（开发）或 build（构建）
mode	当前模式（development/production 等）
ssrBuild	是否 SSR 构建

模式判断

JavaScript

export default defineConfig(({ mode }) => {
  if (mode === 'development') {
    return { /* 开发配置 */ }
  } else if (mode === 'production') {
    return { /* 生产配置 */ }
  } else if (mode === 'staging') {
    return { /* 预发布配置 */ }
  }
})

异步配置

JavaScript

export default defineConfig(async ({ command }) => {
  // 异步加载配置
  const data = await fetchConfig()

  return {
    define: {
      __CONFIG__: JSON.stringify(data)
    }
  }
})

组合配置

JavaScript

import { defineConfig } from 'vite'
import baseConfig from './vite.base.config'

export default defineConfig(({ mode }) => {
  const envConfig = loadEnvConfig(mode)

  return {
    ...baseConfig,
    ...envConfig
  }
})

注意：异步配置在开发环境首次启动时执行，构建时也会执行一次。

配置返回类型

JavaScript

// 对象形式
export default defineConfig({
  // 配置
})

// 函数形式（同步）
export default defineConfig(({ command }) => ({
  // 配置
}))

// 函数形式（异步）
export default defineConfig(async ({ command }) => {
  // 异步操作
  return { /* 配置 */ }
})

要点总结

函数形式可动态调整配置
command 区分 serve/build
mode 区分不同运行模式
支持异步加载配置