Credit where it's due, I found this via this blog post

I recently deployed a Single Page Application (SPA) to GitHub Pages. Everything was working great until I tried to refresh the page. When I did that, I got a 404 error. This is because GitHub Pages doesn't support SPA routing out of the box. This is how I fixed it.

I simply added an echo statement to the command that builds the SPA for those of us who like to see what's going on during the build process. ​

The meat of the addition is the cp command, but there's no visual feedback that it's working. I added the echo statement to let me know that the cp command is running.

"build": "vue-tsc --noEmit && vite build --mode production && echo 'copying index.html to 404.html in ./dist' && cp ./dist/index.html ./dist/404.html",

This is the command that builds my SPA using Vite. The cp command copies the index.html file to 404.html. This way, when a 404 error occurs, the SPA will still load.

This was a difficult one to figure out. I hope this helps someone else.