CODEWITHSUNDEEP
vue.js
Ken Ramirez
Ken Ramirez

Reputation: 335

Error 404 on reload or direct URL with Vue and Apache

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!

Upvotes: 3

Views: 7160

Answers (1)

Renan Bronchart
Renan Bronchart

Reputation: 982

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>

Upvotes: 6

Related Questions