Erro 404 NOT_FOUND ao atualizar rotas em projetos Vue na Vercel: como resolve

Se você criou um site com Vue.js usando o Vue Router e hospedou na Vercel, provavelmente já se deparou com esse erro ao atualizar a página ou acessar diretamente uma rota como /sobre ou /contato/...:

Esse erro ocorre porque a Vercel, por padrão, tenta acessar o caminho literal no sistema de arquivos. Como seu projeto é uma SPA (Single Page Application), as rotas devem ser redirecionadas para o index.html, e o Vue Router cuida do restante.

---

✅ Como resolver o erro 404 NOT_FOUND no Vue com Vercel

1. Crie um ficheiro vercel.json na raiz do projeto:

jsonCopiarEditar{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

---

✅ Resultado

Depois de adicionar o vercel.json, suba o projeto para o GitHub e deixe que a Vercel faça o redeploy.

Agora, você pode atualizar qualquer rota (como /contacto, /produtos, /segundo-ano/matematica) sem cair no erro 404.

---

🔁 Funciona com:

• Vue.js com Vue Router (modo createWebHistory)
• React com React Router
• Qualquer SPA estática hospedada na Vercel