312

Гайд по кофигу Vite

Ссылка на параметры конфига из официальной документации

Ссылка на параметры конфига на русском (актуальность не подверждена)

Параметры

• appType: 'spa' | 'mpa' | 'custom' (default: 'spa')
  Тип приложения
  

• assetsInclude: string | RegExp | (string | RegExp)[]
  Тут можно дополнительно указать форматы, которые стоит обрабатывать как статику, вне папки public. Список расширений, которые vite понимает как статику
  
• base: string
  Base public path для приложения, добавляется после port через / Например http://localhost:5173/test (base: “test”)
  
• cacheDir: string (default: "node_modules/.vite")
  Каталог для сохранения файлов кэша
  
• clearScreen: boolean (default: true)
  Очистка чего? (что-то делает с консолью) пока хз
  
• envDir: string (default: root)
  Путь до папки с файлом конфигурации .env
  
• envPrefix: string (default: VITE\_)
  Префикс для переменных окружения Нельзя использовать '', vite выдаст ошибку. Чтобы убрать префикс смотри параметр define
  
• logLevel: 'info' | 'warn' | 'error' | 'silent' (default: 'info')
  Уровень детализации вывода в консоль
  
• mode: 'development' | 'production' (default: 'development' for dev server, 'production' for build)
  Тип сборки. Значение также можно переопределить с помощью –mode в CLI
  
• publicDir: string | false (default: "public")
  Путь к папке со статикой
  
• root: string (default: process.cwd())
  Путь к файлу index.html
  

Опции для локального запуска (dev-server)

server: {

• host: string | boolean (default: 'localhost')
  URL для dev-server который мы хотим запустить. Для чего значение true - подробнее Можно установить с помощью CLI параметром --host value
  
• port: number (default: 5173)
  Порт
  
• strictPort: boolean (default: false)
  Если порт (например 3001) уже занят, то при значении strictPort: true, выдаст ошибку. Иначе займет другой свободный порт
  
• https: {}
  Включаем TLS + HTTP/2 Примечание, чтобы использовать TLS соединение нужно еще указать параметр server.proxy https: Значение также может быть объектом параметров, передаваемым в https.createServer(). Нужен действительный secure сертификат
  
• open: boolean | string
  Автоматически открывает браузер при запуске сервера Если строка то будет использоваться как URL Можно настраивать options
  
• proxy: Record<string, string | ProxyOptions>
  Правила прокси-сервера для сервера разработки перехватывает запросы на ключи и перенаправялет на значения. Пример: '/foo': 'http://localhost:4567' (shorthand: http://localhost:5173/foo -> http://localhost:4567/foo)
  
• cors: boolean | CorsOptions (default: true)
  CORS для dev сервера подробнее тут
  
• headers: OutgoingHttpHeaders
  Для настройки заголовков, которые приходят с сервера.
  
• hmr: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server } (default: true)
  HMR
  

• warmup: { clientFiles: string[], ssrFiles: string[] }
  Указанные файлы будут преобразованы и кешированы предварительно, для быстрой загрузки. Улучшает начальную загрузку страницы во время запуска сервера. string - относительный от root путь до файла.
  Например:

  clientFiles: ['./src/components.vue', './src/utils/big-utils.js'],
  ssrFiles: ['./src/server/modules.js'],
  

• watch: object | null
  Для настройки просматриваемых файлов при HMR. Если null то файлы просматриваться не будут. По умолчанию exclude .git/ и node_modules/ Подробнее тут
  
• middlewareMode: boolean (default: false)
  Создает сервер Vite в режиме мидлвара. }
  

Для работы с файловой системой fs : {

• strict: boolean (default: true)
  Ограничить обслуживание файлов за пределами корня рабочей области.
  
• allow: string[]
  Ограничить файлы, которые можно обслуживать через /@fs/ Если server.fs.strict: true, то этот параметр не устанавливать, будет ошибка
  
• deny: string[] (default ['.env', '.env.*', '*.{pem,crt}'])
  Черный список для конфиденциальных файлов, обслуживание которых ограничено сервером Vite dev
  
• origin: string
  Определяет источник сгенерированных URL-адресов активов во время разработки.
  
• sourcemapIgnoreList: false | (sourcePath: string, sourcemapPath: string) => boolean (default: (sourcePath) => sourcePath.includes('node_modules'))
  Функция для добавления в игнор путей содержащих указанные значения }
  

Опции для сервера, запускаемого с помощью vite preview (то, что собрали в папку после build) preview {

• host: string | boolean (default: 'localhost')
  URL для dev-server который мы хотим запустить. Для чего значение true - подробнее Можно установить с помощью CLI параметром --host value
  
• port: number (default: 5173)
  Порт
  
• strictPort: boolean (default: false)
  Если порт (например 3001) уже занят, то при значении strictPort: true, выдаст ошибку. Иначе займет другой свободный порт
  
• https: {}
  Включаем TLS + HTTP/2 Примечание, чтобы использовать TLS соединение нужно еще указать параметр server.proxy https: Значение также может быть объектом параметров, передаваемым в https.createServer(). Нужен действительный secure сертификат
  
• open: boolean | string
  Автоматически открывает браузер при запуске сервера Если строка то будет использоваться как URL Можно настраивать options
  
• proxy: Record<string, string | ProxyOptions>
  Правила прокси-сервера для сервера разработки перехватывает запросы на ключи и перенаправялет на значения.
  Пример: '/foo': 'http://localhost:4567' (shorthand: http://localhost:5173/foo -> http://localhost:4567/foo)
  
• cors: boolean | CorsOptions (default: true)
  CORS для dev сервера подробнее тут
  

• headers: OutgoingHttpHeaders
  Для настройки заголовков, которые приходят с сервера. }
  

  Опции для билд сборки (в продакшн) build: {
  

• target: string | string[] (default: "modules")
  В какое окружение собираем билд. "modules" - для браузеров с нативными модулями ES, нативным динамическим импортом ESM и import.meta

  Список значений - chrome, deno, edge, firefox, hermes, ie, ios, node, opera, rhino, safari подробнее
  
  

• modulePreload: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn } (default: { polyfill: true })
  Полифилы
  

• outDir: string (default: "dist")
  root для билда
  

• assetsDir: string (default: "assets")
  Куда складываем результаты билда (сгенерированные чанки и бандлы) путь относительно outDir, т.е. по дефолту process.cwd()/dist/assets
  

• assetsInlineLimit: number | ((filePath: string, content: Buffer) => boolean | undefined) (default: 4096 (4 КБ))
  Все ресурсы, которые весят меньше этого значения будут переведены в base64 и использованы inline. Т.е. для них не будет отдельного запроса во вкладке network
  

• cssCodeSplit: boolean - (default: true)
  Регулирует разделение css кода. Если false - то весь css будет собран в один файл, включая асинхронные модули (подключенные через lazy) Если указать build.lib => будет (default: false)
  

• cssTarget: string | string[] - (default: build.target)
  Для какого окружения собираем css
  

• cssMinify: boolean | 'esbuild' | 'lightningcss' - (default: build.minify)
  Для регулировки минимизации css По умолчанию используется 'esbuild' Если хотим использовать 'lightningcss' нужно настроить в css: {lightningcss: {}} Можно отключить параметром false
  

• cssMinify: boolean | 'inline' | 'hidden' - (default: false)
  Отображение исходных текстов программы (не минимизированных) Если 'inline', исходная карта будет добавлена ​​к результирующему выходному файлу как URI данных 'hidden' работает аналогично true за исключением того, что соответствующие комментарии исходной карты в связанных файлах подавляются.
  

• rollupOptions: RollupOptions
  Опции для сборщика rollup, который используется в build сборке
  

• commonjsOptions: RollupCommonJSOptions
  Опции для плагина rollup @rollup/plugin-commonjs
  

• lib: false | LibraryOptions
  Параметр настройки, если нужно собрать не приложение а библиотеку, например ui
  

• manifest: boolean | string (default: false)
  Для создания манифест файла Если true то будет создан файл .vite/manifest.json подробнее
  

• ssrManifest: boolean | string (default: false)
  Для создания манифест файла ssr подробнее
  

• ssr: boolean | string (default: false)
  При использовании ssr подробнее
  

• ssrEmitAssets: boolean | string (default: false)
  Собирает статику на клиенте. Конфликты с серверной статикой решаются разрабочиками
  

• minify: boolean | 'terser' | 'esbuild' (default: 'esbuild' для сборки клиента, false для сборки SSR.)
  Управление минификацией. 'esbuild' и 'terser' использует одноименные минификаторы. Если стоит значение 'terser', нужно установить в dev зависимость
  

• terserOptions: {}
  Опции для terser минификатора. Использовать если minify: 'terser'
  
  

• write: boolean (default: true)
  Разрешает или запрещает записывать данные на диск при build.
  

• emptyOutDir: boolean (default: true)
  Перед билдом очищаем dist
  

• copyPublicDir: boolean (default: true)
  По умолчанию Vite копирует файлы из publicDir в outDir
  

• reportCompressedSize: boolean (default: true)
  Включить/отключить отчеты о размерах, сжатых gzip Сжатие больших выходных файлов может быть медленным, поэтому его отключение может повысить производительность сборки для больших проектов.
  

• chunkSizeWarningLimit: boolean (default: true)
  Выдает предупреждение если файл превышает утстановленный лимит (в КБ).

}