Конфигурация Vite

При запуске vite из командной строки Vite автоматически попытается найти файл конфигурации с именем vite.config.js в корне проекта (также поддерживаются другие расширения JS и TS).

Самый простой файл конфигурации выглядит так:

vite.config.js

export default {
  // параметры конфигурации
}

Обратите внимание, что Vite поддерживает использование синтаксиса ES модулей в файле конфигурации, даже если проект не использует встроенный узел ESM, например, type: "module" в package.json. В этом случае файл конфигурации автоматически предварительно обрабатывается перед загрузкой.

Вы также можете явно указать файл конфигурации для использования с помощью опции CLI --config (разрешается относительно cwd):

vite --config my-config.js

Настройка Intellisense

Поскольку Vite поставляется с типами TypeScript, вы можете использовать интеллектуальные подсказки вашей IDE с помощью типовых подсказок jsdoc:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

В качестве альтернативы вы можете использовать вспомогательную функцию defineConfig, которая должна обеспечивать интеллектуальные подсказки без необходимости в аннотациях jsdoc:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite также поддерживает файлы конфигурации TypeScript. Вы можете использовать vite.config.ts с вышеупомянутой вспомогательной функцией defineConfig или с оператором satisfies:

import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig

Конфигурация по условию

Если конфигурация должна условно определять параметры в зависимости от команды (serve или build), используемого режима, является ли это сборкой SSR (isSsrBuild) или предварительным просмотром сборки (isPreview), она может экспортировать функцию:

import { defineConfig } from 'vite'
// ---cut---
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // конфигурация, специфичная для разработки
    }
  } else {
    // command === 'build'
    return {
      // конфигурация, специфичная для сборки
    }
  }
})

Важно отметить, что в API Vite значение command равно serve во время разработки (в консоли vite, vite dev и vite serve являются псевдонимами), и build при сборке для продакшена (vite build).

isSsrBuild и isPreview — это дополнительные необязательные флаги для различения типов команд build и serve соответственно. Некоторые инструменты, которые загружают конфигурацию Vite, могут не поддерживать эти флаги и будут передавать undefined вместо этого. Поэтому рекомендуется использовать явное сравнение с true и false.

Асинхронная конфигурация

Если конфигурация должна вызывать асинхронные функции, она может экспортировать асинхронную функцию вместо этого. И эта асинхронная функция также может быть передана через defineConfig для улучшенной поддержки интеллектуальных подсказок:

import { defineConfig } from 'vite'
// ---cut---
export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // конфигурация vite
  }
})

Использование переменных окружения в конфигурации

Переменные окружения можно получить из process.env, как обычно.

Обратите внимание, что Vite по умолчанию не загружает файлы .env, так как файлы для загрузки можно определить только после оценки конфигурации Vite, например, параметры root и envDir влияют на поведение загрузки. Однако вы можете использовать экспортированную вспомогательную функцию loadEnv, чтобы загрузить конкретный файл .env, если это необходимо.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // Загрузите файл окружения на основе `mode` в текущем рабочем каталоге.
  // Установите третий параметр в '' для загрузки всех переменных окружения
  // независимо от префикса `VITE_`.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // конфигурация vite
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV)
    }
  }
})