Hot reload html in public directory

[lovetingyuan]

If you just want add a simple html page to your project, you may place it in the public directory.
But editing html file in public dir will not cause page reloading. In this case you can add a simple script tag in the html file.

<script>
if (location.hostname === 'localhost') {
  fetch('/@vite/client').then(r => r.text()).then(code => {
    const client = document.createElement('script')
    client.type = 'module'
    client.textContent = code + `
    socket.addEventListener('message', ({data}) => {
      JSON.parse(data).type === 'full-reload' && location.reload()
    })
    `
    document.head.append(client)
  })
}
</script>

Then, html in public will reload automatically after you editing it.