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

const router = new VueRouter({
  routes: Routes,
  // relative: true,
  mode: 'history'
});

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>

Answer 2

This worked for me, because my SPA is in a subfolder.Write this inside the .htaccess file.

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

Website folder: C:\xampp\htdocs\dist

.htaccess file ubication: C:\xampp\htdocs\dist\.htaccess

Credits: https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee