1

I created a website with several pages on Vue.js.

Everything is working fine locally, but when I deploy to Heroku, all pages are only working when I click on an internal link in my menu that redirects to the corresponding page (using router push).

When I try to access directly /any-page from the browser I get a 404 with a message saying "Cannot GET /any-page" whereas the same page is displayed correctly via a click on a link.

As I mentioned when I locally serve my app I don't have this problem.

I really can't see where this can come from, thanks in advance for your help.

2
  • Is the website purely in Vuejs or are using a backend framework like Laravel or something?
    – Spiderman
    Jun 19, 2020 at 11:46
  • Hello, the website is in Vuejs, though I am using Firebase for the database
    – hnrd
    Jun 19, 2020 at 13:05

2 Answers 2

2

There's a deployment guide specifically for Heroku in the official Vue CLI documentation.

You'll quickly notice the relevant information:

static.json

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

For SPA's (Single Page Applications), you'll want to point every route to the index. Vue router will take care of navigating to the proper page.

4
  • Thank you Tim. That makes sense, however when I add this static.json at my root directory, commit and deploy on heroku, the problem is still here, when I try to access directly any page other than "/" I get a 404...
    – hnrd
    Jun 19, 2020 at 14:24
  • Are you sure you've followed the steps precisely? Where did you put the static.json file?
    – Tim VN
    Jun 20, 2020 at 11:00
  • 1
    Yes, I created the static.json file with its content (tried to put it at the root level of my project, as it wasn't working also tried in src/ directory the second time), committed it to git, pushed, and launched git push heroku master, but I still get the 404. Is there something I am missing ?
    – hnrd
    Jun 22, 2020 at 16:31
  • Here is another guide that includes a live example on Heroku that works. medium.com/better-programming/…
    – Tim VN
    Jun 22, 2020 at 17:45
1

Heroku is serving the contents of your Vue build folder. Since Vue builds the app as a single index.html file, only the main route works.

Vue doesn't actually navigate to the route, it rather rewrites the the browser url using the history API and handles the loading of the new route.

You could use one of these options:

OPTION 1

You could use mode: "hash" to fix routes when reloading the page. However this will add a # before every route.

const router = new VueRouter({
  mode: "hash",
  routes: [...]
})

OPTION 2

Write an Node.JS (eg Express) app that routes every request to your index.html file. This is called a middleware

Reference: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

1
  • Thanks a lot Maarten for answering my question. For now I tried the first option and it works fine. To get rid of the # I'll consider writing a middleware on node.js. Thanks!
    – hnrd
    Jun 19, 2020 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.