Vue Router hosting on apache2

Question

I am hosting my vuejs project on apache server.

1. init project
2. setup router
3. Build and hosted to apache server

This runs fine in local, but vue router breaks on server. Example

If I run http://example.com and go to http://exmaple.com/sub It works fine

but if I refresh the page It will throw 404 Error.

Error:

Answer 1

From the vue.js documentation page:

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

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 http://oursite.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!

Apache

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