Vue-router history mode isn't working in production

Question

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 !

Does it work in production if you turn off history mode? Is your project in the root folder on the server? Does your server allow mod-rewrites? — Dean
In hash mode everything is fine! The project isn't on the root folder, and I guess my server allow mod-rewrites! — Arkaer
If you visit your app at example.com does the first page load? If yes, then you navigate to example.com/pagetwo and it loads fine but if you refresh the page it does not load, correct? If that is a true statement first make sure the htaccess in in the project root. example /var/www/html next make sure this part is the correct path to the index file RewriteRule . /index.html [L]. If that is all verified try restarting apache. If still no luck ModRewrite is not installed or allow overrides is not allowed. — Tim Wickstrom

Daniel ZA Daniel ZA · Accepted Answer · 2020-05-04T13:36:53

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>

Vue-router history mode isn't working in production

1 Answers