I am hosting my vuejs project on apache server.
const router = new VueRouter({
routes: Routes,
// relative: true,
mode: 'history'
});This runs fine in local, but vue router breaks on server. Example
If I run http://example.com and go to http://exmaple.com/sub It works fine
but if I refresh the page It will throw 404 Error.
Error:
From the vue.js documentation page:
When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
httpd.confThis worked for me, because my SPA is in a subfolder.Write this inside the .htaccess file.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectoryName
RewriteRule ^subdirectoryName/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subdirectoryName/index.html [L]
</IfModule>
Website folder: C:\xampp\htdocs\dist
.htaccess file ubication: C:\xampp\htdocs\dist\.htaccess
Credits: https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee
Since Apache 2.2.16, mod_rewrite is no longer necessary for this. Simply use FallbackResource under the <Directory> or <VirtualHost> configuration.
FallbackResource /index.html
This will serve index.html for all URLs that do not map to anything.
Hi my friend if you are using Linux os, go this routes :
/etc/apache2/sites-enabled/000-default.conf
And add the following code :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond /var/www/html/%{REQUEST_FILENAME} !-f
RewriteCond /var/www/html/%{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
RewriteCond: unknown flag 'L' . Help plz.It seems its not your issue its apache .htaccess issue i guess,
your local may have that file and your server don't have it.
please once check it that, you also uploaded .htaccess to your server as its hidden file you may forgot to upload it.
if its not there you can check this reference help : https://router.vuejs.org/en/essentials/history-mode.html
and add your own .htaccess file if its not there.
