Error 404 on reload or direct URL with Vue and Apache

Question

I'm doing a web with Vue CLI and it works correctly in localhost. Now i deployed it into an Apache server in Azure by compiling locally with npm run build command and uploading the files on the "dist" folder into the "htdocs" folder of the server.

It works alright until i refresh or try to access to an specific route by typing the url. Note that those routes works if i accessed by clicking a link or button related.

I saw in another post that someone had a similar problem but he was using Nuxt.js to compile and apparently the problem was only with dynamic URLs, mine is even with statics one.

This is the message showed:

Object not localized!
The requested URL has not been located on this server. If you have entered the URL manually, please check your spelling and try again.

If you believe that this is a server error, please communicate it to the portal administrator.

Error 404
my-test-server-url.com
Apache / 2.4.28 (Unix) OpenSSL / 1.0.2l PHP / 7.1.10 mod_perl / 2.0.8-dev Perl / v5.16.3

Hope you can help me, thank you!

What does your router config look like? You need history mode enabled on your router. You also need to make changes to your server side config for this to work router.vuejs.org/guide/essentials/… — Matt Oestreich
– Matt Oestreich, Commented May 4, 2019 at 4:01
@MattOestreich thank you! i had history mode enabled but didn't add the .htaccess. This link was helpful — Ken Ramirez
– Ken Ramirez, Commented May 4, 2019 at 14:05

Renan Bronchart · Accepted Answer · 2020-01-14 14:32:25Z

That is due to the history push mode on your vue router. https://router.vuejs.org/guide/essentials/history-mode.html

If your Apache version is above 2.2, you can use Fallback ressource instead of mod_rewrite in your apache config. It works for me.

In /etc/apache2/apache2.conf

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        FallbackResource /index.html
    </Directory>
</VirtualHost>

Or you can use classical mod_rewrite

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        <IfModule mod_rewrite.c>
           RewriteEngine On
           RewriteBase /
           RewriteRule ^index\.html$ - [L]
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteRule . /index.html [L]
        </IfModule>
    </Directory>
</VirtualHost>

Collectives™ on Stack Overflow

Error 404 on reload or direct URL with Vue and Apache

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related