Fix Routing Issues for a VueJS App Deployed to Netlify
March 23, 2019
Had a WTF moment when I deployed a new Vue project to Netlify, only to be confronted with this message when refreshing any route that's not root. It worked just fine locally! Here's how to fix this.
The entire app is a Vue SPA (Single Page App) and because it doesn't require a back-end, I'm hosting it statically on Netlify.
I use Vue Router to build nested routes. A very basic nested route would be
https://craftnautica.netlify.com/sn. Navigating to it via a link worked just fine after I deployed the code to Netlify, however, refreshing the page after the fact, produced the error message you see above. And that went on for every nested route in the app.
To make a long story short, I discovered that an easy fix is to inclide a
netlify.toml file in the root folder of your app, with the following:
[[redirects]] from = "/*" to = "/" status = 200
Redeploy and all the nested routes and permalinks can be refreshed and accessed individually!VueJS Netlify