Почему не открывается страница 404 nuxt generate?

Question

[Михаил Костиков]

Запускаю команду generate потом start
В папке dist появляется файл 404.html
Шаблон /layouts/error.vue не менял.
В nuxt.config.js в generate указал fallback: true и маршруты, target: 'static'.
Ввожу любую не существующую страницу например /sdfs , браузер почему то пытается ее открывать как будто она есть и загрузить js которых нет :

Страницы которые существуют открываются корректно.
nuxt 2.15.8

/layouts/error.vue

<template>
  <v-app>
    <h1 v-if="error.statusCode === 404">
      {{ pageNotFound }}
    </h1>
    <h1 v-else>
      {{ otherError }}
    </h1>
    <NuxtLink to="/"> Home page </NuxtLink>
  </v-app>
</template>

<script>
export default {
  name: "EmptyLayout",
  layout: "empty",
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      pageNotFound: "404 Not Found",
      otherError: "An error occurred",
    };
  },
  head() {
    const title =
      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
    return {
      title,
    };
  },
};
</script>

<style scoped>
h1 {
  font-size: 20px;
}
</style>

nuxt.config.js[generate]

generate: {
    fallback: true,
    async routes() {
      const routes = await getRoutes()
      return routes.map(({ url }) => url)
    }
  }

Comments

[Михаил Костиков]

Стало лучше когда стал запускать еще команду build а потом generate и start
Шаблон из error.vue стал отображаться но данные в nuxtServerInit не получает. Выходит что шапка например не отображается потому что данные для нее получал в nuxtServerInit. Теперь я создал страницу для каждого слага и там уже получаю шапку, а потом проверяю если такой страницы нет вызываю error. Как то запутано получается, ощущение что я что-то не так делаю.

Answer 1

[Александр Карабанов]

Добавь в конфиг:

error_page 404 /404.html;
location = /404.html {
    # Путь до директории где размещена кастомная страница 404.html
    root /path/to/directory/with/404/html;
    internal;
}

Comments

[Михаил Костиков]

error_page 404 /404.html; это у меня было, location добавил ничего не поменялось.

[Александр Карабанов]

Михаил Костиков, покажи весь конфиг - выполни nginx -T

[Михаил Костиков]

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {             # the port nginx is listening on
    server_name     woodbigdata.com www.woodbigdata.com;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;
    error_page 404 /404.html;
    location = /404.html {
        # Путь до директории где размещена кастомная страница 404.html
        root /home/nuxt-vuetify/dist/404.html;
        internal;
    }

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:8000; # set the address of the Node.js instance here
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/woodbigdata.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/woodbigdata.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}


server {
    if ($host = www.woodbigdata.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = woodbigdata.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen          80;
    server_name     woodbigdata.com www.woodbigdata.com;
    return 404; # managed by Certbot




}

root@formu:/# nginx -t
nginx: [warn] conflicting server name "www.woodbigdata.com" on 0.0.0.0:443, ignored
nginx: [warn] conflicting server name "www.woodbigdata.com" on 0.0.0.0:80, ignored
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

[Михаил Костиков]

Александр Карабанов, это из файла etc/nginx/sites-enabled/woodbigdata.com

[Александр Карабанов]

Михаил Костиков, бек возвращает 200, а должен 404 надо что-то поправить в приложении:

curl -IL https://woodbigdata.com/test
HTTP/1.1 200 OK
...

Если сделать запрос прямо к /404.html тобудет возвращена дефолтная страница Nginx:

curl -iL https://woodbigdata.com/404.html
HTTP/1.1 404 Not Found
...

<html>
<head><title>404 Not Found</title></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.18.0 (Ubuntu)</center>
</body>
</html>

В /home/nuxt-vuetify/dist/ точно есть 404.html?

[Михаил Костиков]

Александр Карабанов,

В /home/nuxt-vuetify/dist/ точно есть 404.html?

/home/nuxt-vuetify/dist# ls
404.html  ceni  contacts  faq  favicon.ico  index.html  _nuxt  podr  robots.txt  sitemap.xml  v.png  vuetify-logo.svg

бек возвращает 200, а должен 404 надо что-то поправить в приложении:

Я в вопросе про это и имел ввиду что любая страница грузится.