Конфигурирование Vite #

При запуске vite из командной строки Vite автоматически попытается разрешить файл конфигурации с именем vite.config.js внутри проекта root.

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

// vite.config.js
export default {
  // config options
}

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

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

vite --config my-config.js

Конфигурация IntelliSense #

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

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

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

import { defineConfig } from 'vite'

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

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

Условная конфигурация #

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

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev specific config
    }
  } else {
    // command === 'build'
    return {
      // build specific config
    }
  }
})

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

ssrBuild является экспериментальным. Он доступен только во время сборки вместо более общего флага ssr, потому что во время разработки конфигурация используется одним сервером, обрабатывающим запросы SSR и не-SSR. Значение может быть undefined для инструментов, у которых нет отдельных команд для браузера и сборки SSR, поэтому используйте явное сравнение с true и false.

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

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

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // vite config
  }
})

Переменные среды #

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

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

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite config
    define: {
      __APP_ENV__: env.APP_ENV
    }
  }
})