Error 404 on page reload with vue3 routing

Question

Problem

When I hit reload on a route, e.g /installer, in vue3.js I get the following error:

Code

I use the Router with the following setup:

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

Additional Information

(I don't use createWebHashHistory to get rid of the hashtags in url)

I also get this error when I go to the route, e.g. /installer, directly and not via link.

Question

How to resolve this error?

Answer 1

If you are using nginx, I suggest add this line to the nginx config file:

location / {
  try_files $uri $uri/ /index.html;
}

refer to: https://next.router.vuejs.org/guide/essentials/history-mode.html#apache