Параметры сервера

server.host

Тип: string | boolean
По умолчанию: 'localhost'

Укажите, какие IP-адреса сервер должен прослушивать. Установите для этого параметра значение 0.0.0.0 или true, чтобы прослушивать все адреса, включая локальные и общедоступные адреса.

Это можно установить через CLI, используя --host 0.0.0.0 или --host.

ПРИМЕЧАНИЕ

Бывают случаи, когда другие серверы могут отвечать вместо Vite.

В первом случае используется localhost. Node.js в версии 17 по умолчанию переупорядочивает результат разрешения DNS. При доступе к localhost, браузеры используют DNS для разрешения адреса, и этот адрес может отличаться от адреса, который прослушивает Vite. Vite печатает разрешенный адрес, когда он отличается.

Вы можете установить dns.setDefaultResultOrder('verbatim'), чтобы отключить поведение переупорядочения. Затем Vite напечатает адрес как localhost.

// vite.config.js
import { defineConfig } from 'vite'
import dns from 'dns'

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  // omit
})

Во втором случае используются подстановочные знаки (например, 0.0.0.0). Это связано с тем, что серверы, прослушивающие хосты без подстановочных знаков, имеют приоритет над серверами, прослушивающими хосты с подстановочными знаками.

Доступ к серверу WSL2 из вашей локальной сети

При запуске Vite на WSL2 недостаточно установить host: true для доступа к серверу из вашей локальной сети. Смотрите документацию WSL для более подробной информации.

server.port

Тип: number
По умолчанию: 5173

Укажите порт сервера. Обратите внимание, что если порт уже используется, Vite автоматически попробует следующий доступный порт, поэтому это может быть не тот порт, который сервер в конечном итоге прослушивает.

server.strictPort

Тип: boolean

Установите значение true, чтобы выйти, если порт уже используется, вместо того, чтобы автоматически пытаться использовать следующий доступный порт.

server.https

Тип: https.ServerOptions

Включите TLS + HTTP/2. Обратите внимание, что переход на TLS происходит только в том случае, если также используется опция server.proxy.

Значение также может быть объектом параметров, переданным в https.createServer().

Нужен действующий сертификат. Для базовой настройки вы можете добавить @vitejs/plugin-basic-ssl в плагины проекта, которые будут автоматически создавать и кэшировать собственный -подписанный сертификат. Но мы рекомендуем создавать собственные сертификаты.

server.open

Тип: boolean | string

Автоматически открывать приложение в браузере при запуске сервера. Если значение представляет собой строку, оно будет использоваться в качестве пути URL-адреса. Если вы хотите открыть сервер в конкретном браузере, который вам нравится, вы можете установить env process.env.BROWSER (например, firefox). Вы также можете установить process.env.BROWSER_ARGS для передачи дополнительных аргументов (например, --incognito).

BROWSER и BROWSER_ARGS также являются специальными переменными среды, которые вы можете установить в файле .env для его настройки. Дополнительную информацию смотрите в пакете open.

Пример:

export default defineConfig({
  server: {
    open: '/docs/index.html',
  },
})

server.proxy

Тип: Record<string, string | ProxyOptions>

Настройте пользовательские правила прокси для сервера разработки. Ожидает объект пар { key: options }. Любые запросы, путь запроса которых начинается с этого ключа, будут проксированы на указанную цель. Если ключ начинается с ^, он будет интерпретирован как RegExp. Параметр configure можно использовать для доступа к экземпляру прокси.

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

Расширяет http-proxy. Дополнительные параметры находятся здесь.

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

Пример:

export default defineConfig({
  server: {
    proxy: {
      // string shorthand: http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // with RegEx: http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // Using the proxy instance
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy'
        },
      },
      // Proxying websockets or socket.io: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})

server.cors

Тип: boolean | CorsOptions

Настройте CORS для сервера разработки. Это включено по умолчанию и допускает любой источник. Передайте объект параметров, чтобы точно настроить поведение, или false, чтобы отключить.

server.headers

Тип: OutgoingHttpHeaders

Укажите заголовки ответа сервера.

server.hmr

Тип: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }

Отключите или настройте соединение HMR (в случаях, когда веб-сокет HMR должен использовать адрес, отличный от http-сервера).

Установите для server.hmr.overlay значение false, чтобы отключить наложение ошибок сервера.

clientPort — это расширенный параметр, который переопределяет порт только на стороне клиента, позволяя вам обслуживать веб-сокет на порту, отличном от того, который ищет клиентский код.

Когда server.hmr.server определен, Vite будет обрабатывать запросы на подключение HMR через предоставленный сервер. Если не в режиме промежуточного программного обеспечения, Vite попытается обработать запросы на подключение HMR через существующий сервер. Это может быть полезно при использовании самозаверяющих сертификатов или когда вы хотите открыть Vite по сети на одном порту.

Посмотрите vite-setup-catalogue для некоторых примеров.

ПРИМЕЧАНИЕ

Ожидается, что в конфигурации по умолчанию обратные прокси-серверы перед Vite будут поддерживать проксирование WebSocket. Если клиенту Vite HMR не удается подключиться к WebSocket, клиент вернется к подключению WebSocket напрямую к серверу Vite HMR, минуя обратные прокси:

Отказ от прямого подключения к веб-сокету. Проверьте https://vitejs.ru/config/server-options.html#server-hmr , чтобы удалить предыдущую ошибку подключения.

Ошибку, которая появляется в браузере, когда происходит откат, можно игнорировать. Чтобы избежать ошибки путем прямого обхода обратных прокси-серверов, вы можете:

настроить обратный прокси-сервер на прокси-сервер WebSocket
установите server.strictPort = true и установите для server.hmr.clientPort то же значение, что и для server.port
установите для server.hmr.port значение, отличное от server.port

server.warmup

Тип: { clientFiles?: string[], ssrFiles?: string[] }
Связанный: Разминка часто используемых файлов

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

clientFiles — это файлы, которые используются только в клиенте, а ssrFiles — это файлы, которые используются только в SSR. Они принимают массив путей к файлам или шаблоны fast-glob относительно root.

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

export default defineConfig({
  server: {
    warmup: {
      clientFiles: ['./src/components/*.vue', './src/utils/big-utils.js'],
      ssrFiles: ['./src/server/modules/*.js'],
    },
  },
})

server.watch

Тип: object | null

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

Наблюдатель сервера Vite по умолчанию отслеживает root и пропускает каталоги .git/ и node_modules/. При обновлении просматриваемого файла Vite применит HMR и обновит страницу только при необходимости.

Если установлено значение null, файлы просматриваться не будут. server.watcher предоставит совместимый генератор событий, но вызов add или unwatch не будет иметь никакого эффекта.

Наблюдение файлов в node_modules

В настоящее время невозможно просматривать файлы и пакеты в node_modules. Для дальнейшего прогресса и обходных путей вы можете следить за проблемой #8619.

Использование Vite в подсистеме Windows для Linux (WSL) 2

При запуске Vite на WSL2 просмотр файловой системы не работает, когда файл редактируется приложениями Windows (процесс, отличный от WSL2). Это связано с ограничением WSL2. Это также относится к работе в Docker с серверной частью WSL2.

Чтобы исправить это, вы можете:

Рекомендуется: используйте приложения WSL2 для редактирования файлов.
- Также рекомендуется переместить папку проекта за пределы файловой системы Windows. Доступ к файловой системе Windows из WSL2 медленный. Удаление этих накладных расходов повысит производительность.
Установите { usePolling: true }.
- Обратите внимание, что usePolling приводит к высокой загрузке ЦП.

server.middlewareMode

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

Создайте сервер Vite в режиме мидлвара.

Связанный: appType, SSR — настройка сервера разработки
Пример:

import express from 'express'
import { createServer as createViteServer } from 'vite'

async function createServer() {
  const app = express()

  // Create Vite server in middleware mode
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom', // don't include Vite's default HTML handling middlewares
  })
  // Use vite's connect instance as middleware
  app.use(vite.middlewares)

  app.use('*', async (req, res) => {
    // Since `appType` is `'custom'`, should serve response here.
    // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares to handle
    // HTML requests and 404s so user middlewares should be added
    // before Vite's middlewares to take effect instead
  })
}

createServer()

server.fs.strict

Тип: boolean
По умолчанию: true (enabled by default since Vite 2.7)

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

server.fs.allow

Тип: string[]

Ограничить файлы, которые можно обслуживать через /@fs/. Когда для server.fs.strict установлено значение true, доступ к файлам за пределами этого списка каталогов, которые не импортированы из разрешенного файла, приведет к ошибке 403.

Могут быть предоставлены как каталоги, так и файлы.

Vite выполнит поиск корня потенциального рабочего пространства и будет использовать его по умолчанию. Действительная рабочая область соответствует следующим условиям, в противном случае произойдет возврат к project root.

содержит поле workspaces в package.json
содержит один из следующих файлов
- lerna.json
- pnpm-workspace.yaml

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

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
})

Когда указан server.fs.allow, автоматическое обнаружение корня рабочей области будет отключено. Чтобы расширить исходное поведение, предоставляется утилита searchForWorkspaceRoot:

import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // search up for workspace root
        searchForWorkspaceRoot(process.cwd()),
        // your custom rules
        '/path/to/custom/allow_directory',
        '/path/to/custom/allow_file.demo',
      ],
    },
  },
})

server.fs.deny

Тип: string[]
По умолчанию: ['.env', '.env.*', '*.{crt,pem}']

Черный список для конфиденциальных файлов, обслуживание которых ограничено сервером Vite dev. Это будет иметь более высокий приоритет, чем server.fs.allow. Поддерживаются шаблоны picomatch.

server.origin

Тип: string

Определяет источник сгенерированных URL-адресов активов во время разработки.

export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:8080',
  },
})

server.sourcemapIgnoreList

Тип: false | (sourcePath: string, sourcemapPath: string) => boolean
По умолчанию: (sourcePath) => sourcePath.includes('node_modules')

Следует ли игнорировать исходные файлы в исходной карте сервера, используемой для заполнения расширения исходной карты x_google_ignoreList.

server.sourcemapIgnoreList является эквивалентом build.rollupOptions.output.sourcemapIgnoreList для сервера разработки. Разница между двумя параметрами конфигурации заключается в том, что функция свертки вызывается с относительным путем для sourcePath, а функция server.sourcemapIgnoreList вызывается с абсолютным путем. Во время разработки большинство модулей хранят карту и исходный код в одной папке, поэтому относительный путь для sourcePath — это само имя файла. В этих случаях вместо этого удобно использовать абсолютные пути.

По умолчанию он исключает все пути, содержащие node_modules. Вы можете передать false, чтобы отключить это поведение, или, для полного контроля, функцию, которая принимает исходный путь и путь к исходной карте и возвращает, следует ли игнорировать исходный путь.

export default defineConfig({
  server: {
    // This is the default value, and will add all files with node_modules
    // in their paths to the ignore list.
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')
    }
  }
};

Примечание

server.sourcemapIgnoreList и build.rollupOptions.output.sourcemapIgnoreList необходимо устанавливать независимо. server.sourcemapIgnoreList — это конфигурация, предназначенная только для сервера, и она не получает значение по умолчанию из определенных параметров объединения.

Параметры сервера ​

server.host ​

server.port ​

server.strictPort ​

server.https ​

server.open ​

server.proxy ​

server.cors ​

server.headers ​

server.hmr ​

server.warmup ​

server.watch ​

server.middlewareMode ​

server.fs.strict ​

server.fs.allow ​

server.fs.deny ​

server.origin ​

server.sourcemapIgnoreList ​