Wie man Vite bei aktiviertem VPN verwendet, schnelle Lösung

Bei der Arbeit mit einem VPN entsteht der Hauptkonflikt dadurch, dass der Browser oder das Betriebssystem versuchen, den lokalen Datenverkehr über den VPN-Tunnel zu leiten, was zu Verbindungsfehlern oder nicht funktionierenden Seitenaktualisierungen führt.

Ausnahmen im VPN einrichten (Split Tunneling)

Am zuverlässigsten ist es, den VPN-Client so zu konfigurieren, dass er lokale Adressen ignoriert.

• Öffnen Sie die Einstellungen des VPN-Clients;

• Suchen Sie den Abschnitt Split Tunneling oder Exclusion List;

• Fügen Sie die folgenden Adressen zu den Ausnahmen hinzu:

  • localhost;
  • 127.0.0.1;
  • 0.0.0.0.

Zwangsweise Bindung an IP und Port

Damit Vite über alle Netzwerkschnittstellen erreichbar ist und einen bestimmten Port verwendet, müssen Sie Änderungen an der Datei vite.config.js vornehmen. Die Einstellung des Hosts auf 0.0.0.0 hilft oft dabei, VPN-Routing-Einschränkungen zu umgehen.

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

Konfiguration von HMR (Hot Module Replacement)

Wenn die Website zwar geöffnet wird, Änderungen am Code jedoch erst nach einem manuellen Neuladen angezeigt werden, blockiert das VPN die WebSocket-Verbindung. In diesem Fall müssen die Parameter für das Hot-Reload-Modul explizit angegeben werden:

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

Wenn eine sichere Verbindung verwendet wird, ändern Sie das Protokoll auf wss.

Deaktivieren des System-Proxys für das Terminal

Wenn Vite mit den vom VPN gesetzten Umgebungsvariablen in Konflikt steht, können Sie die Proxy-Einstellungen im Terminal vorübergehend zurücksetzen, bevor Sie den Server starten.

Für Windows (PowerShell):

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

npm run dev

Für macOS/Linux:

unset HTTP_PROXY
unset HTTPS_PROXY

npm run dev