Открытие браузера при старте

Опция server.open управляет автоматическим открытием браузера после запуска dev-сервера Vite. После выполнения команды запуска проекта браузер может автоматически открыть локальный адрес приложения, например http://localhost:5173.

Базовая настройка:

import { defineConfig } from 'vite'

export default defineConfig({
    server: {
        open: true
    }
})

После запуска команды:

npm run dev

Vite автоматически откроет браузер с адресом локального сервера.

Принцип работы

Во время старта Vite:

  1. запускает dev-сервер;
  2. определяет адрес и порт;
  3. ожидает готовности сервера;
  4. передаёт URL операционной системе;
  5. ОС открывает браузер по умолчанию.

Поведение зависит от платформы:

  • Windows использует системную ассоциацию URL;
  • Linux использует стандартные desktop-команды;
  • macOS использует механизм open.

Включение автоматического открытия браузера

Наиболее простой вариант:

server: {
    open: true
}

Эквивалент CLI-команды:

vite --open

или:

npm run dev -- --open

Открытие конкретного пути

Параметр может принимать строку. В этом случае открывается не корневой URL, а указанный маршрут.

Пример:

export default defineConfig({
    server: {
        open: '/admin'
    }
})

После запуска откроется:

http://localhost:5173/admin

Это особенно полезно для:

  • административных панелей;
  • страниц авторизации;
  • демо-страниц;
  • playground-интерфейсов;
  • тестовых роутов.

Использование с кастомным портом

Если указан собственный порт:

export default defineConfig({
    server: {
        port: 8080,
        open: true
    }
})

Vite откроет:

http://localhost:8080

Использование вместе с host

При работе по локальной сети:

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 3000,
        open: true
    }
})

Браузер всё равно откроет локальный адрес:

http://localhost:3000

Даже если сервер доступен с других устройств по IP.

Открытие HTTPS-адреса

При включённом HTTPS:

export default defineConfig({
    server: {
        https: true,
        open: true
    }
})

Будет открыт адрес:

https://localhost:5173

Открытие браузера только в режиме разработки

Часто требуется включать открытие браузера только в определённых режимах.

Пример условной конфигурации:

import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
    return {
        server: {
            open: mode === 'development'
        }
    }
})

Использование переменных окружения

Настройка может зависеть от .env:

VITE_OPEN_BROWSER=true

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

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())

    return {
        server: {
            open: env.VITE_OPEN_BROWSER === 'true'
        }
    }
})

Отключение автоматического открытия

Для полного отключения:

server: {
    open: false
}

Это поведение используется по умолчанию во многих командах и CI-средах.

Особенности работы в разных средах

Терминал VS Code

При запуске из встроенного терминала VS Code браузер обычно открывается корректно.

Однако некоторые расширения могут перехватывать запуск и открывать встроенный preview вместо обычного браузера.

WSL

В Windows Subsystem for Linux автоматическое открытие браузера зависит от настройки интеграции Windows и Linux.

Иногда требуется ручная настройка переменных окружения или утилит открытия URL.

Docker

В контейнерах Docker автоматическое открытие браузера обычно бесполезно, поскольку контейнер не имеет доступа к графическому интерфейсу хост-системы.

Поэтому чаще используется:

server: {
    open: false
}

CI/CD

В системах непрерывной интеграции открытие браузера отключается автоматически или не выполняется из-за отсутствия GUI.

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

При наличии нескольких приложений:

export default defineConfig({
    server: {
        port: 4100,
        open: '/dashboard'
    }
})

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

Открытие браузера через npm-скрипты

Настройка может задаваться напрямую в package.json.

Пример:

{
    "scripts": {
        "dev": "vite --open"
    }
}

Или:

{
    "scripts": {
        "dev": "vite --open /admin"
    }
}

Комбинирование с другими параметрами сервера

Полный пример:

import { defineConfig } from 'vite'

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 5173,
        strictPort: true,
        https: false,
        open: '/login'
    }
})

Практический сценарий для SPA

Для SPA-приложения с роутингом:

server: {
    open: '/app'
}

После запуска разработчик сразу попадает в основную часть приложения.

Практический сценарий для административной панели

server: {
    open: '/admin/dashboard'
}

Экономит время при постоянной работе с backend-интерфейсом.

Практический сценарий для документации

server: {
    open: '/docs'
}

Полезно при разработке UI-kit, design-system или внутренней документации.

Отличие true и строки

true

open: true

Открывает корневой адрес:

/

Строка

open: '/profile'

Открывает конкретный путь:

/profile

Поведение при занятом порте

Если порт уже используется:

server: {
    port: 3000,
    open: true
}

и strictPort выключен, Vite может выбрать другой порт:

3001
3002
3003

После этого браузер откроет уже новый фактический адрес.

Совместимость с strictPort

server: {
    port: 3000,
    strictPort: true,
    open: true
}

Если порт занят:

  • сервер не запустится;
  • браузер не откроется;
  • Vite завершится с ошибкой.

Распространённые проблемы

Браузер не открывается

Возможные причины:

  • отсутствует GUI;
  • запуск внутри Docker;
  • проблемы системных ассоциаций;
  • ограничения WSL;
  • запуск через SSH;
  • сервер завершился с ошибкой до открытия.

Открывается неправильный браузер

Vite использует браузер по умолчанию, установленный в системе.

Изменение производится средствами ОС, а не Vite.

Открывается несколько вкладок

Обычно связано с:

  • параллельным запуском нескольких dev-серверов;
  • hot reload расширений IDE;
  • повторным запуском npm-скриптов;
  • дублирующими процессами Vite.

Рекомендации по использованию

Подходит для:

  • локальной разработки;
  • frontend-приложений;
  • SPA;
  • demo-проектов;
  • playground-сред;
  • UI-kit;
  • Storybook-подобных систем.

Не рекомендуется для:

  • Docker-контейнеров;
  • CI/CD;
  • удалённых серверов;
  • SSH-сессий;
  • headless-сред.

Полный пример конфигурации

import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {

    const isDev = mode === 'development'

    return {
        server: {
            host: 'localhost',
            port: 5173,
            strictPort: false,
            https: false,
            open: isDev ? '/dashboard' : false
        }
    }
})

Такая конфигурация:

  • открывает браузер только в development;
  • сразу переходит на /dashboard;
  • использует фиксированный порт;
  • не включает HTTPS;
  • допускает автоматический выбор свободного порта.
Оглавление