How to use Vite with VPN enabled, quick solution

When using a VPN, the main issue arises because the browser or operating system attempts to route local traffic through the VPN tunnel, which results in connection errors or pages failing to refresh.

Configuring Exceptions in a VPN (Split Tunneling)

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

• Open the 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.

Forcing IP and Port Binding

To make Vite accessible on all network interfaces and use a specific port, you need to make changes to the 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 site loads but code changes aren't reflected without a manual refresh, it means your VPN is blocking the WebSocket connection. In this case, you need to explicitly specify the parameters for the hot module reload module:

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

If you are using a secure connection, change the protocol to wss.

Disabling the system proxy for the terminal

If Vite conflicts with environment variables set by the VPN, you can temporarily reset the proxy settings in the 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