CODEWITHSUNDEEP
apache.htaccessvue.jsvue-router
Shahinyanm
Shahinyanm

Reputation: 11

404 error on page reload in vue router history mode

I have vue cli project deployed on ubuntu (apache2 server) After vue router mode change, all pages besides index, are showing 404 page on reload.

I added .htaccess to /dist path where index.html is, but it still not working I have no idea what else do to solve this issue. Have anybody some idea?

here is my project dist folder

/home/admin/web/mali-nali.com/public_html/dist

.htaccess code in dist 

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

this is htacccess.madewithlove.be debuging info

RewriteEngine On    RewriteEngine was now turned on
2   RewriteBase /   Using / as the base for the rewrites.
3   RewriteRule ^index\.html$ - [L] This rule was not met.
4   RewriteCond %{REQUEST_FILENAME} !-f This condition was met.
5   RewriteCond %{REQUEST_FILENAME} !-d This condition was met.
6   RewriteRule . /index.html [L]   The new url is https://mali-nali.com/index.html
The tests are stopped because of the L in your RewriteRule options.

last route for all not exists pages

{path: '/*',component:FourohFour, name:'404'}

Upvotes: 0

Views: 4801

Answers (4)

Maik Lowrey
Maik Lowrey

Reputation: 17594

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', '.*');

Upvotes: 0

atsuyaourt
atsuyaourt

Reputation: 36

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>

Upvotes: 1

Marcio
Marcio

Reputation: 1733

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.

Upvotes: 0

sevensidedmarble
sevensidedmarble

Reputation: 683

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.

Upvotes: 0

Related Questions