Lovable 或 Bolt 單頁應用程式在 Vercel、Netlify 重新整理深層連結時出現 404 的修復方法

Your Lovable or Bolt app works from the home page, but /dashboard shows 404 on Vercel or Netlify when you refresh it or open a link to it. One small file fixes it.

What you see

The home page loads. Clicking around works. But refresh /dashboard, or open a link someone shared to it, and the host answers 404 NOT_FOUND.

Why it happens

The app is a single-page app: its pages exist only in the browser, drawn by a router (React Router, Wouter). The host is asked for a file called /dashboard, has none, and says so. Inside Lovable or Bolt, their hosting sends every address to the app for you.

How to fix it

1. On Vercel, add a file named vercel.json at the top of the repository with: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }
2. On Netlify, add public/_redirects with the line: /* /index.html 200
3. On Cloudflare Pages, you need nothing: it sends unknown addresses to the app by itself.
4. Commit, push, and open a deep link again.

Or ask your AI tool to fix it

Paste this into Lovable, Bolt, v0, Replit or Cursor:

My app shows 404 when a page other than the home page is refreshed or opened directly on Vercel. Add a vercel.json at the root of the repository that rewrites every path to /index.html, so the router handles it. Don't change anything else.

The full page, with the request ready to copy, is at launchpad.axonscape.com/fix/page-404-on-refresh. I work on Launchpad by Axonscape, which runs a free launch check for apps built with AI tools: it finds this and the other things that break at launch, from a public GitHub repo or a .zip of the code, and keeps nothing.