如何在 nginx + vue.js 中显示自定义 500 页面？

Question

我的项目是 vue.js 上的一个 spa，它运行在 nginx 网络服务器上，位于数字海洋水滴上。 我需要向用户显示一个带有 500 错误的自定义页面，而不是默认的 500 错误消息。 我在 digitalocean 网站上找到了如何执行此操作的说明：https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-to-use-custom-error-pages-on-ubuntu-14-04， 但不幸的是，这个食谱对我来说不起作用。 下面是我的 nginx 配置。

server {
    listen 80;
    listen [::]:80;
    server_name my-app-domain.io;
    return 302 https://$server_name$request_uri;
}

server {
    # SSL configuration
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    ssl                     on;
    ssl_certificate         /etc/ssl/certs/ssl-cert-my-app-cf.pem;
    ssl_certificate_key     /etc/ssl/private/ssl-key-my-app-cf.pem;

    server_name my-app-domain.io;
    root        /var/www/my-app-domain.io/dist;
    index       index.html index.htm index.nginx-debian.html;

    auth_basic           "Administrator's Area";
    auth_basic_user_file /etc/nginx/.htpasswd;

    error_page 500 502 503 504 /custom_50x.html;
    location = /custom_50x.html {
        ssi on;
        root /usr/share/nginx/html;
        index custom_50x.html
        internal;
    }

    location /testing {
        fastcgi_pass unix:/does/not/exist;
    }

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

server {
    if ($host = my-app-domain.io) {
        return 301 https://$host$request_uri;
    }


    listen 80;
}

结果，当我转到 /testing 页面时，我希望看到一个 500 错误的自定义页面，但我看到了这个。

Answer 1

你的公开文件在这里

/var/www/my-app-domain.io/dist;

你需要改变那个目录的500页

不是默认的

/usr/share/nginx/html;

例子

error_page 500 502 503 504 /error.html;

location = /error.html {
  ssi on;
  internal;
  auth_basic off;
  root /var/www/my-app-domain.io;
}

如果这不起作用，你可以使用我的配置

            location / {

   try_files $uri $uri/ /index.php?$args;
  
        error_page 404 =  /index.php;
         error_page 403 /403.html;

        }

        error_page 404 =301 https://domain.io/;
        error_page 403 /403.html;
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
                root /var/www/html/live;


 }