Как использовать Vite при включённом VPN, быстрое решение

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

Настройка исключений в VPN (Split Tunneling)

Самый надежный способ, настроить VPN-клиент так, чтобы он игнорировал локальные адреса.

• Откройте настройки VPN-клиента;

• Найдите раздел Split Tunneling или Exclusion List;

• Добавьте в исключения следующие адреса:

  • localhost;
  • 127.0.0.1;
  • 0.0.0.0.

Принудительная привязка к IP и порту

Чтобы Vite был доступен по всем сетевым интерфейсам и использовал конкретный порт, нужно внести правки в файл vite.config.js. Установка хоста 0.0.0.0 часто помогает обойти ограничения маршрутизации VPN.

export default {
  server: {
    host: '0.0.0.0', 
    port: 3000,
  }
}

Настройка HMR (Hot Module Replacement)

Если сайт открывается, но изменения в коде не отображаются без ручной перезагрузки, значит VPN блокирует WebSocket-соединение. В этом случае нужно явно указать параметры для модуля горячей перезагрузки:

export default {
  server: {
    host: '0.0.0.0',
    port: 3000,
    hmr: {
      protocol: 'ws',
      host: 'localhost',
    },
  },
}

Если используется защищенное соединение, смените протокол на wss.

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

Если Vite конфликтует с переменными окружения, которые установил VPN, можно временно сбросить настройки прокси в терминале перед запуском сервера.

Для Windows (PowerShell):

$env:HTTP_PROXY=""
$env:HTTPS_PROXY=""

npm run dev

Для macOS/Linux:

unset HTTP_PROXY
unset HTTPS_PROXY

npm run dev