page not found when reload the page in Vue

Question

yes this question been ask some people as well and this issue trigger to https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

why I asked this again ? I did create file .htaccess in root folder like that Link tell, but it still doesnt work, this is I my.htaccess in the root

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

do I create wrong name file ?

my vue app doesnt has server though just like static website

so I have a route like this

mydomain.com/detail/:name

when I go to that page it was good, but when I refresh again, it was not working again and it said page not found

I deploy this app on surge and GitLab Pages (using their ci/cd) it was same result ,

what is the matter then with my vue ??

HMilbradt HMilbradt · Accepted Answer · 2019-11-05T05:32:14

Surge does not support .htaccess files. The file you added is specific to servers running Apache.

From their docs, there's two ways to do this.

1: Adding redirects

ROUTER files are part of Surge Plus. When you publish, you’ll be prompted to upgrade your project right from the CLI.

Unfortunately, you need an upgraded account to access this feature. They also don't have any examples of more complicated redirects, so you'd need to try these yourself, or reach out to their support.

2: Adding a 200.html

To take advantage of this with Surge, add a 200.html file into the root of your project. Now, when a request for a URL comes in where you don’t have a static HTML page, it will reach your 200 page instead, allowing you to use your client-side router.

Your 200.html file should contain enough HTML and javascript to mount you app and allow your router to take over. You could start by copying your apps index.html, and placing the contents inside a 200.html located in the same folder as your index.html.

page not found when reload the page in Vue

1 Answers