Skip to content
На этой странице

Free Online Conference

ViteConf - Oct 11

Get your ticket now!

Общие параметры

root

  • Тип: string
  • По умолчанию: process.cwd()

Корневой каталог проекта (где находится index.html). Может быть абсолютным путем или путем относительно текущего рабочего каталога.

Дополнительные сведения смотрите в Корень проекта.

base

  • Тип: string
  • По умолчанию: /

Базовый общедоступный путь при использовании в разработке или рабочей среде. Допустимые значения включают:

  • Абсолютный URL-адрес, например, /foo/
  • Полный URL, например, https://foo.com/
  • Пустая строка или ./ (для встроенного развертывания)

Дополнительные сведения смотрите в разделе Общедоступный базовый путь.

mode

  • Тип: string
  • По умолчанию: 'development' для serve, 'production' для build

Указание этого в конфигурации переопределит режим по умолчанию для и обслуживания, и сборки. Это значение также можно переопределить с помощью параметра командной строки --mode.

Подробнее смотрите в разделе Переменные и режимы окружения.

define

  • Тип: Record<string, string>

Определить глобальные замены констант. Записи будут определены как глобальные во время разработки и статически заменены во время сборки.

  • Начиная с 2.0.0-beta.70, строковые значения будут использоваться как необработанные выражения, поэтому при определении строковой константы ее необходимо явно заключать в кавычки (например, с JSON.stringify).

  • Чтобы соответствовать поведению esbuild, выражения должны быть либо объектом JSON (пустым, логическим, числом, строкой, массивом или объектом), либо одним идентификатор.

  • Замены выполняются только тогда, когда совпадение не окружено другими буквами, цифрами, _ или $.

WARNING

Поскольку он реализован как простая замена текста без какого-либо синтаксического анализа, мы рекомендуем использовать define только для КОНСТАНТ.

Например, хорошо подходят process.env.FOO и __APP_VERSION__. Но process или global не следует указывать в этой опции. Вместо этого переменные могут быть заполнены оболочкой или заполнены полифиллом.

ПРИМЕЧАНИЕ

Для пользователей TypeScript обязательно добавьте объявления типов в файл env.d.ts или vite-env.d.ts, чтобы получить проверки типов и Intellisense.

Пример:

ts
// vite-env.d.ts
declare const __APP_VERSION__: string

ПРИМЕЧАНИЕ

Поскольку dev и build реализуют define по-разному, нам следует избегать некоторых вариантов использования, чтобы избежать несогласованности.

Пример:

js
const obj = {
  __NAME__, // Don't define object shorthand property names
  __KEY__: value // Don't define object key
}

plugins

  • Тип: (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]

Массив плагинов для использования. Фальшивые плагины игнорируются, а массивы плагинов сглаживаются. Если обещание возвращается, оно будет разрешено перед запуском. Смотрите API плагина для получения дополнительной информации о плагинах Vite.

publicDir

  • Тип: string | false
  • По умолчанию: "public"

Каталог для использования в качестве простых статических активов. Файлы в этом каталоге обслуживаются в / во время разработки и копируются в корень outDir во время сборки, и всегда обслуживаются или копируются как есть без преобразования. Значение может быть либо абсолютным путем к файловой системе, либо путем относительно корня проекта.

Определение publicDir как false отключает эту функцию.

Смотрите Каталог public для более подробной информации.

cacheDir

  • Тип: string
  • По умолчанию: "node_modules/.vite"

Каталог для сохранения файлов кеша. Файлы в этом каталоге представляют собой предварительно упакованные deps или некоторые другие файлы кеша, созданные vite, которые могут повысить производительность. Вы можете использовать флаг --force или вручную удалить каталог, чтобы восстановить файлы кеша. Значение может быть либо абсолютным путем к файловой системе, либо путем относительно корня проекта. По умолчанию используется .vite, если package.json не обнаружен.

resolve.alias

  • Тип:Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

Будет передан @rollup/plugin-alias в качестве параметра записей. Может быть либо объектом, либо массивом пар { find, replacement, customResolver }.

При использовании псевдонимов для путей файловой системы всегда используйте абсолютные пути. Относительные значения псевдонимов будут использоваться как есть и не будут преобразовываться в пути файловой системы.

Более расширенное пользовательское разрешение можно получить с помощью плагинов.

Использование с SSR

Если вы настроили псевдонимы для внешних зависимостей SSR, вы можете захотеть использовать псевдонимы для фактических пакетов node_modules. И Yarn, и pnpm поддерживают псевдонимы через префикс npm:.

resolve.dedupe

  • Тип: string[]

Если у вас есть дублированные копии одной и той же зависимости в вашем приложении (вероятно, из-за подъема или связанных пакетов в монорепозиториях), используйте этот параметр, чтобы заставить Vite всегда разрешать перечисленные зависимости в одну и ту же копию (из корня проекта).

SSR + ESM

Для сборок SSR дедупликация не работает для выходных данных сборки ESM, настроенных из build.rollupOptions.output. Обходной путь — использовать выходные данные сборки CJS, пока в ESM не будет улучшена поддержка подключаемых модулей для загрузки модулей.

resolve.conditions

  • Тип: string[]

Дополнительные разрешенные условия при разрешении условного экспорта из пакета.

Пакет с условным экспортом может иметь следующее поле exports в package.json:

json
{
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.js"
    }
  }
}

Здесь import и require — это «условия». Условия могут быть вложенными и должны указываться от наиболее конкретных к наименее конкретным.

Vite имеет список «разрешенных условий» и будет соответствовать первому условию в списке разрешенных. Допустимые условия по умолчанию: import, module, browser, default и production/development в зависимости от текущего режима. Параметр конфигурации resolve.conditions позволяет указать дополнительные допустимые условия.

Разрешение экспорта подпути

Ключи экспорта, оканчивающиеся на "/", устарели в Node и могут работать некорректно. Обратитесь к автору пакета, чтобы вместо этого использовать * шаблоны подпути.

resolve.mainFields

  • Тип: string[]
  • По умолчанию: ['module', 'jsnext:main', 'jsnext']

Список полей в package.json, которые нужно попробовать при разрешении точки входа пакета. Обратите внимание, что это имеет более низкий приоритет, чем условный экспорт, разрешенный из поля exports: если точка входа успешно разрешена из exports, основное поле будет проигнорировано.

resolve.browserField

  • Тип: boolean
  • По умолчанию: true
  • Устарело

Включить ли разрешение в поле browser.

В будущем, значением по умолчанию для resolve.mainFields будет ['browser', 'module', 'jsnext:main', 'jsnext'], и эта опция будет удалена.

resolve.extensions

  • Тип: string[]
  • По умолчанию: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

Список расширений файлов, которые можно попробовать для импорта без расширений. Обратите внимание, что НЕ рекомендуется опускать расширения для пользовательских типов импорта (например, .vue), так как это может помешать IDE и поддержке типов.

  • Тип: boolean
  • По умолчанию: false

Включение этого параметра приводит к тому, что vite определяет идентификатор файла по исходному пути к файлу (т. е. пути без перехода по символическим ссылкам) вместо реального пути к файлу (т. е. пути после перехода по символическим ссылкам).

css.modules

  • Тип:
    ts
    interface CSSModulesOptions {
      scopeBehaviour?: 'global' | 'local'
      globalModulePaths?: RegExp[]
      generateScopedName?:
        | string
        | ((name: string, filename: string, css: string) => string)
      hashPrefix?: string
      /**
       * По умолчанию: null
       */
      localsConvention?:
        | 'camelCase'
        | 'camelCaseOnly'
        | 'dashes'
        | 'dashesOnly'
        | null
    }
    

Настройте поведение модулей CSS. Параметры передаются postcss-modules.

css.postcss

  • Тип: string | (postcss.ProcessOptions & { plugins?: postcss.AcceptedPlugin[] })

Встроенная конфигурация PostCSS или пользовательский каталог для поиска конфигурации PostCSS (по умолчанию — корень проекта).

Для встроенной конфигурации PostCSS ожидается тот же формат, что и postcss.config.js. Но для свойства plugins можно использовать только формат массива.

Поиск выполняется с помощью postcss-load-config, и загружаются только поддерживаемые имена файлов конфигурации.

Обратите внимание, что если указана встроенная конфигурация, Vite не будет искать другие источники конфигурации PostCSS.

css.preprocessorOptions

  • Тип: Record<string, object>

Укажите параметры для передачи в препроцессоры CSS. Расширения файлов используются в качестве ключей для опций. Пример:

js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      },
      styl: {
        additionalData: `$injectedColor ?= orange`
      }
    }
  }
})

css.devSourcemap

  • Экспериментальный
  • Тип: boolean
  • По умолчанию: false

Включить ли исходные карты во время разработки.

json.namedExports

  • Тип: boolean
  • По умолчанию: true

Поддерживать ли именованный импорт из файлов .json.

json.stringify

  • Тип: boolean
  • По умолчанию: false

Если установлено значение true, импортированный JSON будет преобразован в export default JSON.parse("..."), который значительно более эффективен, чем литералы Object, особенно когда файл JSON большой.

Включение этого параметра отключает именованный импорт.

esbuild

  • Тип: ESBuildOptions | false

ESBuildOptions расширяет собственные параметры преобразования esbuild. Наиболее распространенный вариант использования — настройка JSX:

js
export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

По умолчанию esbuild применяется к файлам ts, jsx и tsx. Вы можете настроить это с помощью esbuild.include и esbuild.exclude, которые могут быть регулярным выражением, шаблоном picomatch или массивом либо.

Кроме того, вы также можете использовать esbuild.jsxInject, чтобы автоматически внедрять вспомогательный импорт JSX для каждого файла, преобразованного esbuild:

js
export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})

Когда build.minify равно true, все оптимизации минимизации применяются по умолчанию. Чтобы отключить определенные аспекты его, установите для любого из параметров esbuild.minifyIdentifiers, esbuild.minifySyntax или esbuild.minifyWhitespace значение false. Обратите внимание, что параметр esbuild.minify нельзя использовать для переопределения build.minify.

Установите false, чтобы отключить преобразования esbuild.

assetsInclude

Укажите дополнительные шаблоны picomatch, которые будут рассматриваться как статические ресурсы, чтобы:

  • Они будут исключены из конвейера преобразования плагина при ссылке из HTML или прямом запросе через fetch или XHR.

  • Импорт их из JS вернет их разрешенную строку URL-адреса (это можно перезаписать, если у вас есть плагин enforce: 'pre' для другой обработки типа актива).

Список встроенных типов активов можно найти здесь.

Пример:

js
export default defineConfig({
  assetsInclude: ['**/*.gltf']
})

logLevel

  • Тип: 'info' | 'warn' | 'error' | 'silent'

Настройте уровень детализации вывода консоли. По умолчанию это 'info'.

clearScreen

  • Тип: boolean
  • По умолчанию: true

Установите значение false, чтобы Vite не очищал экран терминала при регистрации определенных сообщений. Через командную строку используйте --clearScreen false.

envDir

  • Тип: string
  • По умолчанию: root

Каталог, из которого загружаются файлы .env. Может быть абсолютным путем или путем относительно корня проекта.

Подробнее о файлах среды смотрите здесь.

envPrefix

  • Тип: string | string[]
  • По умолчанию: VITE_

Переменные Env, начинающиеся с envPrefix, будут доступны исходному коду вашего клиента через import.meta.env.

ЗАМЕЧАНИЯ ПО БЕЗОПАСНОСТИ

envPrefix не должен быть установлен как '', что приведет к раскрытию всех ваших переменных env и неожиданной утечке конфиденциальной информации. Vite выдаст ошибку при обнаружении ''.

appType

  • Тип: 'spa' | 'mpa' | 'custom'
  • По умолчанию: 'spa'

Независимо от того, является ли ваше приложение одностраничным приложением (SPA), многостраничным приложением (MPA) или пользовательским приложением (SSR и фреймворки с пользовательской обработкой HTML):

  • 'spa': включите резервный мидлвар SPA и настройте sirv с single: true в предварительном просмотре
  • 'mpa': включать только мидлвар HTML, не относящееся к SPA.
  • 'custom': не включать мидлвар HTML.

Узнайте больше в Руководстве по Vite. Связанный: server.middlewareMode.

Выпущено под лицензией MIT. (dev)