Page refresh returns 404 error on deployed vuejs vue-router apllication-CodePudding

The homepage/base url of the app can be refreshed with no issues. but other pages return 404 on page refresh. Please are there any work around for this?

Here is a screenshot of the 404. [1]: https://i.stack.imgur.com/lc8xD.png

CodePudding user response：

It happens because Vue routing is only on the frontend side. So when you refresh the page it goes backend server. And it checks for any files to satisfy the request.

To solve this issue. You have to tell your apache webserver to handle it for your front end Vue app.

CodePudding user response：

Try adding this to your .htaccess:

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