How to fix " Not found " when refresh page with vue js SPA in Apache Server? - apache

Question

I just deploy my vue js project to apache server. My file /dist located in /var/www/html/dist. When i visit the page it's work fine. But when i visit in another page and i refresh the page, in browser say 404 Not found. How can i fix this ?

Answer 1

You need a configuration something similar to this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
It will automatically serve index.html file for every request that doesn't have a corresponding static file. You will have to put this .htaccess file. The use of IfModule is explained here.

Answer 2

I have same error, on ubuntu after i install apache.
First i added in /etc/apache2/apache2.conf
AllowOverride All
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
In /etc/apache2/sites-available
<VirtualHost test.ru:80>
ServerName www.test.ru
ServerAlias test.ru
ServerAdmin webmaster#localhost
DocumentRoot /var/www/test.ru
<Directory /var/www/test.ru>
#Разрешение на перезапись всех директив при помощи .htaccess
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
Then in console activate rewrite module and restart apache
sudo a2enmod rewrite
service apache2 restart