Конфигурация 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

ЗАГРУЗКА КОНФИГУРАЦИИ

По умолчанию Vite использует esbuild для сборки конфигурации во временный файл и его загрузки. Это может вызвать проблемы при импорте файлов TypeScript в монорепозитории. Если у вас возникают проблемы с таким подходом, вы можете указать --configLoader runner, чтобы использовать модульный раннер вместо него. В этом случае временный конфигурационный файл не создается, а файлы будут преобразовываться на лету. Обратите внимание, что модульный раннер не поддерживает CJS в файлах конфигурации, но внешние CJS-пакеты должны работать как обычно.

Кроме того, если вы используете среду, поддерживающую TypeScript (например, node --experimental-strip-types), или если ваш код написан только на чистом JavaScript, вы можете указать --configLoader native, чтобы использовать встроенную среду выполнения для загрузки конфигурационного файла. Учтите, что обновления модулей, импортируемых конфигурационным файлом, не отслеживаются, поэтому сервер Vite не будет автоматически перезапускаться.

Настройка 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), используемого режима, опции isSsrBuild (сборка SSR) или опции isPreview (превью сборки), она может экспортировать функцию:

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 для улучшенной поддержки интеллектуальных подсказок:

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

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

Переменные окружения, доступные во время обработки конфигурации, — это только те, которые уже существуют в текущем окружении процесса (process.env). Vite намеренно откладывает загрузку любых файлов .env* до момента после разрешения пользовательской конфигурации, поскольку набор загружаемых файлов зависит от таких параметров конфигурации, как root и envDir, а также от окончательного значения mode.

Это означает, что переменные, определённые в файлах .env, .env.local, .env.[mode] или .env.[mode].local, не автоматически добавляются в process.env во время выполнения vite.config.*. Они автоматически загружаются позже и становятся доступны для кода приложения через import.meta.env (с фильтром по префиксу VITE_ по умолчанию), как описано в главе Переменные окружения и режимы. Таким образом, если вам нужно только передать значения из файлов .env* в приложение, вызывать что-либо в конфигурации не требуется.

Однако, если значения из файлов .env* должны влиять на саму конфигурацию (например, для установки server.port, включения плагинов по условию или вычисления замен в define), вы можете загрузить их вручную с помощью экспортируемой вспомогательной функции loadEnv.

import { defineConfig, loadEnv } from 'vite'

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

Отладка конфигурационного файла в VS Code

При использовании поведения по умолчанию --configLoader bundle, Vite записывает сгенерированный временный конфигурационный файл в папку node_modules/.vite-temp, и при установке точек останова для отладки в конфигурационном файле Vite возникнет ошибка «file not found» («файл не найден»). Чтобы исправить эту проблему, добавьте следующую конфигурацию в .vscode/settings.json:

{
  "debug.javascript.terminalOptions": {
    "resolveSourceMapLocations": [
      "${workspaceFolder}/**",
      "!**/node_modules/**",
      "**/node_modules/.vite-temp/**"
    ]
  }
}