.htaccess file for Vue app – How to deploy Vue JS Application on apache server with direct link access? Fix 404 Problem

.htaccess file for vue project! If you want to deploy vue on cpanel or apache server follow this guide!

When you deploy your vue.js application on apache server or any kind of server that uses apache you should use this rewrite rule to access url’s when you open directly in new tab.

When you deploy vue app to apache server you will see 404 not found pages when you use vue router, why?

In default configuration vue application is a static web application which doesnt interact with server back-end. That is why you get 404 page when you open vue app links in new tab, or someone get into page from search engines.

 To handle this link with vue router we need to rewrite url with this htaccess file.

This htaccess file allows vue app to control all url’s.

( First Version ) Simple .htaccess file for vue app

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

All requests will hit to vue application with this configuration.

Now you can use defined vue routers on your vue application. You wont get any 404 page.