When I refresh the page, I get a 404 error.

[swallowcc]

Hello, I'm currently facing an issue with your project. After running "pnpm build" and placing the resulting "dist" files into nginx, I noticed that whenever I refresh the page, I get a 404 error. I'm not sure which step I may have missed in the setup. I would appreciate your response. Thank you very much.

[Shyam-Chen]

You need to configure Single Page Applications in Nginx, and I suppose the possible configuration could be:

location / {
  try_files $uri $uri/ /index.html;
}

I personally use Caddy, and below is my configuration:

https://github.com/Shyam-Chen/Vue-Starter/blob/main/Caddyfile#LL6C32-L6C32

[swallowcc]

Thank you for your prompt response.

In fact, I currently have a requirement to integrate the built files into a Java project, which is why I was testing with nginx.

However, after making the modifications based on the configuration values you provided, the situation has now changed to a 500 error. It seems that the situation has worsened.

[Shyam-Chen]

Here is an Nginx configuration I had a long time ago, sharing it with you:

server {
  server_name ${NGINX_HOST};
  listen ${NGINX_PORT};

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /service-worker.js {
    add_header Cache-Control "max-age=0,no-cache,no-store,must-revalidate";
  }

  client_max_body_size 4G;
  keepalive_timeout 10;
}

If you still can't make it work successfully, you can consider downgrading the mode of Vue Router to createWebHashHistory. This issue pertains to Nginx and SPA (Single Page Application). I will close the issue.