Nginx Question posted in
The official documentation can be found here.

404 on refresh with Vue Router and Nginx

I have a project on an Ubuntu server that produces a 404 error when refreshing or manually typing the URL. For example, I can go to example.com but I cannot go to example.com/home or refresh while on that page without getting a 404. Clicking on links work as expected. I’m using Vue router in history mode and have added the following in the http section of the nginx.conf file:

server {

            listen 80;
            server_name example.com;

            root /var/www/example.com;

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

I can test the configuration with sudo nginx -t and it passes, but I’m still getting 404 errors. It might be worth mentioning that I have multiple server blocks on this server.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I modified the nginx.conf a bit and this worked:

    server {

            listen 80;
            server_name example.com;

            index index.html;

            location / {
                    root /var/www/example.com;
                    index index.html;
                    try_files $uri $uri/ /index.html;
            }
    }

  2. 0

    Dockerfile

    FROM nginx:1.22.0-alpine
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

    nginx.conf

    server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

    Build image

    docker build -t ui .

    Run container

    docker run -d --name ui -p 80:80 ui
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search