Настройка VITE

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

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

vite.config.js

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

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

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

vite --config my-config.js

CONFIG LOADING

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

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

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

Поскольку Vite Ships с типовыми типами, вы можете использовать Intellisense своей IDE с помощью подсказков типа JSDOC:

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

В качестве альтернативы, вы можете использовать помощника defineConfig , который должен обеспечить Intellisense без необходимости аннотаций 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'
// ---резать---
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // DEV -специфическая конфигурация
    }
  } else {
    // команда === 'build'
    return {
      // Создайте конкретную конфигурацию
    }
  }
})

Важно отметить, что в API Vite значение command составляет serve во время DEV (в CLI vite , vite dev и vite serve - псевдонимы) и build при строительстве для производства ( vite build ).

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

Асинхронизированная Конфигурация

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

import { defineConfig } from 'vite'
// ---резать---
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(({ mode }) => {
  // Загрузите файл env на основе `mode` в текущем рабочем каталоге.
  // Установите третий параметр на «загрузить все env независимо от
  // `VITE_` Префикс.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // Vite Config
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})