12

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
    }
  ]
});
Max Liashuk
  • 1,043
  • 7
  • 18
eQuinox
  • 201
  • 3
  • 8
  • 2
    Have you seen this: https://router.vuejs.org/en/essentials/history-mode.html Taje a look at the server configs. I had the same issue and had to use the work around on this link. – webnoob Nov 14 '17 at 11:21
  • Hello, thank you. Yeah, I said I implemented this with this link but nothing has changed :( – eQuinox Nov 14 '17 at 13:23
  • I think your firebase config is not sticking. The rewrites look correct from what I've seen online. Does the server need to be restarted, or is the firebase file deployed in the wrong place? – akatakritos Nov 14 '17 at 17:52
  • Yeah it's sure it's from Firebase, but I cannot find where. Still on it ... – eQuinox Nov 20 '17 at 08:35
  • The firebase file are deployed at the good place as well. And I use npm serve on my dist/ repo to test it with an npm build. Help :'( – eQuinox Nov 20 '17 at 08:44
  • Did you found something? – Victor Leal Feb 12 '18 at 16:29
  • @eQuinox can you provide an repo for this please? I uploaded a fresh vue cli project with history mode enabled to firebase and it works fine. See here please https://vuecoins.firebaseapp.com/ – Sebastian Richter Sep 06 '18 at 08:19

3 Answers3

0

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.

Phil
  • 157,677
  • 23
  • 242
  • 245
  • In my localhost my vuejs project work very well, but when i deploy it up on firebase hosting i recieve 404 not found in all my routes, even using `firebase deploy --only hosting` command the problem persist, it does not work – Fernando Torres Jul 16 '21 at 02:07
  • @FernandoTorres you need to have added the `hosting.rewrites` config in your `firebase.json` file (like in the question above) – Phil Jul 16 '21 at 02:10
  • Thanks for you kindly reply. I just have added that single line into my `firebase.json` but when i finish to deploy it (using `firebase deploy --only hosting` command) my `firebase.json` turn back into the init state which have only this content: `{ "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } }` Do you know what is happening? Also, my routes still not working :( – Fernando Torres Jul 16 '21 at 02:24
  • Sorry no, I've never seen the `firebase deploy` command make any changes to the `firebase.json` file – Phil Jul 16 '21 at 02:28
  • No worries, Phil, thanks very much for your attention, i will still looking for a solution and when i make it , i'll be back here to tell you for any future purposes – Fernando Torres Jul 16 '21 at 02:31
  • I felt into this doc https://firebaseopensource.com/projects/firebaseextended/emberfire/docs/guide/deploying-to-firebase-hosting/ and that helped me to make it work my project, i just modify as this docs say my firebase.json and then hit firebase deploy and that was all! Thanks – Fernando Torres Jul 16 '21 at 02:55
0

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

Noor Fahad
  • 94
  • 7
0

You can't write route directly when you want to navigate to a specific page, firebase hosting will only load your root route which means the "/" route and then you can navigate in another route by clicking any link, button, menu in your root page that goes to your another route

Case: SPA

arga wirawan
  • 217
  • 1
  • 2
  • 14