How to use Vite with VPN enabled, quick solution

When working with a VPN, the primary conflict arises because the browser or system attempts to route local traffic through the VPN tunnel instead of keeping it within your local machine. This leads to connection errors or pages failing to refresh.

Configuring VPN Exceptions (Split Tunneling)

The most reliable method is to configure your VPN client to ignore local addresses.

• Open your VPN client settings.

• Find the Split Tunneling or Exclusion List section.

• Add the following addresses to the exceptions:

  • localhost
  • 127.0.0.1
  • 0.0.0.0

Enforcing IP and Port Binding

To ensure Vite is accessible across all network interfaces and uses a specific port, modify your vite.config.js file. Setting the host to 0.0.0.0 often helps bypass VPN routing restrictions.

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

Configuring HMR (Hot Module Replacement)

If the website opens but code changes do not appear without a manual refresh, the VPN is likely blocking the WebSocket connection. In this case, you must explicitly define the parameters for the Hot Module Replacement:

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

Note: If you are using a secure connection (HTTPS), change the protocol to wss.

Disable System Proxy for Terminal

If Vite conflicts with environment variables set by the VPN, you can temporarily reset the proxy settings in your terminal before starting the server.

For Windows (PowerShell):

$env:HTTP_PROXY=""
$env:HTTPS_PROXY=""
npm run dev

For macOS/Linux:

unset HTTP_PROXY
unset HTTPS_PROXY
npm run dev