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

By Waicung in VueJS — Jul 11, 2023

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>