11 Jul 2023 • 1 min read

Apache config for hosting single-page Vue APP with vue-router

When navigating to any route in a single-page application, a Page not found will occur. It is because the server is trying to retrieve an actual file from the web folder. add the following config to the web server can direct all traffic to the entry page.

Photo by Romson Preechawit / Unsplash

Apache Config

Put the following code in the .htaccess file to direct all traffic to index.html

<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>