Конфигурация 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 (превью сборки), она может экспортировать функцию:

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)
    }
  }
})

Отладка конфигурационного файла в 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/**"
    ]
  }
}