[Vuejs]-404 error on page reload in vue router history mode

by

1👍

Set your publicPath option in vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/subfolder-name/" : "/",
};

Then, in the dist directory, create a .htaccess with contents like this:

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

0👍

From https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Note: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use the publicPath option of Vue CLI and the related base property of the router.

It appears like that’s what you’re missing.

👤sevensidedmarble

0👍

In the root of your Vue project add a file called vue.config.js with the code below.

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/mali-nali.com/' : '/'
}

Then still in the root of your Vue project add a file called 404.html with the code below.

<!DOCTYPE html>
 <html>
  <head>
    <script>         
        sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/mali-nali.com/'">
  </head>
 </html>

Then copy the 404.html file you created into the /dist folder.
I hope that helps you.

👤Marcio

0👍

Because the problem is as relevant today as it was then, here is a possible error why you get a 404 on a refresh of a SPA route.
If you use laravel and Vue SPA with the Vue Router you have to make sure that the web route is configured correctly.

This line should be in your web.php like this or similar:

web.php

Route::get('{any}', function () {
    return view('your-spa-page'); 
   // your-spa-page = the page in which you include the SPA via the selector #app
})->where('any', '.*');
👤Maik Lowrey

Leave a comment