vue.js route problem on my server - does not work

Question

I have routes, like this:

/about
/experience

When i click localhost/about , localhost/experience its working.

But when i upload the files to the my server like test.com, if i try to go test.com/experience its not working. its giving an 404 error.

But if i go to the pages from the homepage, its working. What is the problem?

Answer 1

I solved it with htaccess

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

Answer 2

Your server is not configured to rewrite missing files (HTTP 404 errors) to your /index.html If you're using Nginx, this can be achieved like this:

⋮

location / {
  try_files $uri @rewrite;
}

location @rewrite {
  rewrite ^(.*)$ /index.html last;
}

If you can not control your web server configuration - you will need to switch from history to hash mode in the Vue-Router settings.