Question posted in
Some documentation to get you started can be found here.

404 error on page reload in vue router history mode – Apache

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'}
Tags:

4

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 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', '.*');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search