How to fix " Not found " when refresh page with vue js SPA in Apache Server?

Question

I just deploy my vue js project to apache server. My file /dist located in /var/www/html/dist. When i visit the page it's work fine. But when i visit in another page and i refresh the page, in browser say 404 Not found. How can i fix this ?

You are not supplying enough information. I suspect it has something to do with how you are using vue-router. — skribe
– skribe, Commented Jun 8, 2019 at 7:00
You have not configured your server. What are you expecting? You're serving flat HTML. Your server doesn't know to forward all requests for all URL's to your index page. / works because you probably defined an index, but all other routes? like /about-us? Apache doesn't know about those. Configure it to. — Ohgodwhy
– Ohgodwhy, Commented Jun 8, 2019 at 7:01
Yea i use vue-router. in my vue router like this : export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/detail', name: 'detail', component: Detail } ] }); so how can i configure in server ? — Mar_TO
– Mar_TO, Commented Jun 8, 2019 at 7:06
@Ohgodwhy oke, but where i should put .htaccess in server? inside /var/www/html/dist ? — Mar_TO
– Mar_TO, Commented Jun 8, 2019 at 7:23

Harshal Patil · Accepted Answer · 2019-06-08 10:07:31Z

12

You need a configuration something similar to this:

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

It will automatically serve index.html file for every request that doesn't have a corresponding static file. You will have to put this .htaccess file. The use of IfModule is explained here.

answered Jun 8, 2019 at 10:07

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mar_TO Over a year ago

Hey @Harshall Patil i just that code in apache in folder /var/www/html/dist/.htaccess, in /dist folder contain index.html, after that i restart apache but still not working.

Mar_TO Over a year ago

I just fix it, i forget to enable .htaccess in /etc/httpd/conf/httpd.conf

Andrew Over a year ago

2022 still a valid fix. I was using FallbackResource but with https it didn't seem to work, this solution did. Ubuntu Apache Thanks.

Юрий Ярвинен · Accepted Answer · 2020-05-03 09:03:02Z

I have same error, on ubuntu after i install apache. First i added in /etc/apache2/apache2.conf

AllowOverride All

<Directory /var/www/>
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

In /etc/apache2/sites-available

<VirtualHost test.ru:80>

ServerName www.test.ru
ServerAlias test.ru

ServerAdmin webmaster@localhost
DocumentRoot /var/www/test.ru
<Directory /var/www/test.ru>
    #Разрешение на перезапись всех директив при помощи .htaccess
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Then in console activate rewrite module and restart apache

sudo a2enmod rewrite
service apache2 restart

Collectives™ on Stack Overflow

How to fix " Not found " when refresh page with vue js SPA in Apache Server?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related