"page not found" when refreshing the page

Hello everyone!

I created a single page aplication in vue and it’s impossible to refresh the page (using the browser’s refresh button) whenever we are not on the home page. It just goes 404. The problem didn’t exist on the local host server.

It is hosted on netlify. Anyone can help me with this one?

thanks in advance!

Eric

Sounds to me like it could be a history mode issue. See HTML5 History Mode | Vue Router

I’m assuming more server side configuration is required on your app to get netlify to operate the same way as your localhost.

1 Like

For netlify you’ll want to create a netlify.toml file in your projects root directory.

Within the toml, use this to redirect all requests

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Thank you so much!
I don’t understand what I just did, but it works perfectly!

The .toml file is what Netlify uses as a configuration file. What these lines do is redirect any incoming request (/*) to your root page (index.html) and return a 200 success message indicating the response was successful. Once your index is loaded, Vue and Vue-Router take over.