Vite + Cloudflare Tunnel

You may find when serving your Vite project locally using vite, or vite dev, or pnpnm dev, and trying to access it through Cloudflare Tunnel, that it doesn't work properly. Either it times out, or your browser is unable to load some assets.

To resolve, simply add server.hmr.clientPort with value of 443 to your vite.config.js. For example:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: {
      clientPort: 443
    }
  }
})