Vue app not routing correctly when deployed

Hello, I’m new to Vue and Netlify. I just created a small website and for some reason I can not access any pages besides the home page. I know about the docs regarding History Mode but I am not using any server in my app. Does anyone know how to fix this?

Welcome to our community, Ruby!

I think you may be missing this configuration:

Could you give it a try and see if it helps out?

I will definitely give this a try! Sorry for the rookie question, but where exactly do I implement that code?

I’m using Bitbucket and Yarn if that helps.

You’ll want to end up with that directive in an _redirects file which lives next to index.html after your project is built. I am not intimately familiar with Vue so not sure if you can “start out” with it in dist/ (assuming that is where your project is built to) or if you’d want to do something else like:

  • if there is a separate “static assets” folder that you can put things like a favicon.ico in, you could try putting it there.
  • you’d need to copy it in place afterwards from a different location; some static site generators prefer that. In that case you’d use a pattern like yarn run build && cp redirects.txt dist/_redirects as a build command (after creating /redirects.txt with the right content, and replacing yarn run build with whatever you actually use to build).

Hopefully one of those patterns can help, but let us know if not and perhaps link us to your build logs to help us give more specific advice in that case as well :slight_smile:

Thank you so much for your help and time. I really appreciate it!

The solution was to add the ‘redirect’ file to the ‘public’ folder (that also has index.html).

The code I had in the redirect file - /* /index.html 200

1 Like

Happy to help! Thank YOU for the very specific follow-up with your solution and marking it as a solution! That will help others in your situation discover this information on their own, which is a large portion of why we put so much staff effort into community responses - to make them “google-able” so folks can discover previous answers that are relevant to their situation without waiting for our help.

Kudos for a “perfect landing” on your first participation in the community :smiley:

1 Like