Vue 3 simple catch-all fallback route not working on server

Question

I have created a new Vue 3 application using Vue router 4.

When I access the link through <router-link> it opens the page but when I open the link directly it shows not found error.

{
Not Found
The requested URL was not found on this server.
Apache/2.4.52 (Ubuntu) Server at classifieds.netnoor.com Port 443
}

When I test it on the local environment using vite. It working fine on local but when I deployed it using npm vite build and uploaded the dist folder on Appache server it's not work and always it shows not found error.

const router = createRouter({
  history: createWebHistory('/'),
  routes: [
    {
      path: "/:pathName(.*)*",
      name: "NotFound",
      component: HomeView
    },
    {
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: HomeView
    },
      other routes below

  ]
})

I have not set up any .htaccess file. Please let me know how to handle this I have setup simple catch-all fallback but its not working.

Answer 1

It's not related to Vue or Vue-router.

Use should use mod_rewrite on the remote Apache to link all URLs to index.html. So you should have index.html returned from the server, then the vue router will do the job of navigation.

But you have just default 404 page issued by Apache with no Vue on it at all.

If you change createWebHistory to createWebHashHistory it will work too, but you will have hash URLs.