Vue-router history mode isn't working in production

user_10591497 0
Viewed 1605

I'm new to vue and I'm having an issue with vue router. I'm using Vue CLI 3. History mode is working perfectly on a local server but in production mode it shows a 404 when refreshing

I know this is a common issue, so I followed the documentation of Vue Router. So I put this piece of code in a .htaccess file at the root of the project, but it doesn't seem to work 

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

Since I'm a beginner I must miss something, any idea?

Thank you for your help !

vue-router vue.js
1 Answers

On Google Cloud Compute, running Debian and serving via Apache.

This was painful as mod_rewrite would just not work. Turns out the issue seems to be with Apache in prod (especially if you do it yourself), where the defaults nail you.

Case in point the following rule in /etc/apache2/apache2.conf :

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

Thus, the files under /var/www/http, which means any .htaccess rewrite rules will not be allowed. Luckily once we know this, we can enable the rewrite:

<Directory /var/www/html>
        AllowOverride All
</Directory>

The .htaccess rewrite rules (via mod_rewrite) will now be applied as expected:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d    
  RewriteRule . /index.html [L]

</IfModule>
user_34549210
Related