Search code examples
javascriptvue.jsrouteshttp-status-code-404web-hosting

404 error when accessing website with parameters (vuejs)


I am working on a website using VueJS and just figured out how to do url parameters, which works well on my local machine. I can navigate to a page, and copy the full link including parameters in my browser and the page loads the same way.

Example: I type localhost:8080 to load the index site, navigate to localhost:8080/param1/param2 to go to another site, everything works fine. I can even type in localhost:8080/param1/param2 DIRECTLY (without going to index page first) and it works too.

However, after a build and upload to my web hosting provider, I can not type in the url with parameters DIRECTLY, it only works when navigating from index page.

I can the following error:

404 Error

I have almost no experience with routing and web hosting and even after extensive research could not find a solution online. Any help would be greatly appreciated.

Additional information based on comments I've received:

Web host: I have a login to Plesk where I can manage my settings. There I have "Apache & nginx" settings which look like this:

Apache Settings

nginx Settings


Solution

  • This is due to the fact that SPA's do not have different HTML pages for different URL's like conventional pages. So, you have to either redirect all the requests to the index.html page in the server settings or set the history property to this history: createWebHashHistory().

    Let me know if this works.

    P.S: Sorry I don't know how to configure the settings for this in Apache or Nginx