'VueJS and Firebase, history mode 404 error when refresh

I removed the hashbang in the link with history mode in my router file. Now when I refresh a page I got the 404 error.

I tried to follow this link

then, I added the part in firebase.json :

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

however nothing has changed.

I don't understand why I've still this error. I tried many things but I can't find something to fix it.

This is my router file :

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/catalog'
    },
    {
      path: '/catalog',
      name: 'Catalog',
      component: Catalog
    },
    {
      path: '/catalog/category/:category',
      name: 'ProductsList',
      component: ProductsList
    },
    {
      path: '/catalog/category/:category/product/:id',
      name: 'ProductDetail',
      component: ProductDetail,
    },
    {
      path: '/catalog/category/:category/product/create',
      name: 'CreateProduct',
      component: CreateProduct
    }
  ]
});

Solution 1:^[1]

The only thing I can think of is that you haven't deployed the changes to your firebase.json file.

Execute

firebase deploy --only hosting

You should be able to view the deployment history from your project's Hosting page. Confirm that the changes have been deployed.

Solution 2:^[2]

i face this issue so-many times. you just need to init firebase again and keep in mind select ssr type

i am sure it will resolved

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Phil
Solution 2	Noor Fahad

'VueJS and Firebase, history mode 404 error when refresh

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]