CODEWITHSUNDEEP
vue.jsvue-routergithub-pages
Astro Orbis
Astro Orbis

Reputation: 87

How would I make Vue Router work with GitHub Pages?

I just deployed my Vue app to my website using GitHub Pages.

The website is successfully hosted at https://astroorbis.com.

Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.

There are other links that have the same error, such as /discord, /github, etc.

I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.

What would be the solution for this?

Upvotes: 1

Views: 860

Answers (1)

kissu
kissu

Reputation: 46769

As stated in this section of the HTML5 mode

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

So, the solution would be to use something like that

const routes = [
  // will match everything and put it under `$route.params.pathMatch`
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]

On Netlify, you also need to add the following for it to work
/public/_redirects

/* /index.html 200

So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.

Otherwise maybe just give a try to Netlify with the _redirects configuration.

Maybe this article could help regarding Github pages.

The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).

Upvotes: 1

Related Questions