vue-router url paths are giving a 404 in production with nodejs

Question

I am attempting to deploy a multipage vue3 frontend to an application. It works fine in development mode, but in production, when I attempt to navigate to a url via the search bar -- e.g. https://mywebsite.com/customers, I get a 404.

I am able to fix this by redirecting to the homepage using the suggestion on vue-router's documentation, but then it just goes to the homepage rather than showing the actual page I would like to visit. Is there some way around this that I am missing? An additional step or does this suggest I am misconfiguring this somehow?

Sargis Maksimyan · Accepted Answer · 2022-11-02 23:23:11Z

1

I solved this by setting up the server. You need to understand what server you have installed. Go to config update and restart the server.

Here are the Server Configurations

Apache

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

edited Nov 2, 2022 at 23:23

answered Nov 2, 2022 at 23:16

Sargis Maksimyan

263 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julie Over a year ago

Thanks so much! I struggled to get it working in native node.js, but express with node worked -- esp. forum.vuejs.org/t/…

Collectives™ on Stack Overflow

vue-router url paths are giving a 404 in production with nodejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related