尝试返回自定义 404 页面而不是 nginx 404 默认页面

Question

我有使用 Vue.js 制作的 SPA。

我以这种方式在客户端处理 404：

//at the end of router
{
  path: '/404',
  name: 'not-found',
  component: () => import(...)
},
{
  path: '*',
  redirect: '/404'
}

问题：当我试图访问我的开发环境中一些不存在的页面时，我得到了 nginx 默认 404 页面而不是我的 Vue 页面。

Nginx 配置的零件：

server {
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    //ssl config managed by Certbot
}

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

    server_name <...>;
    listen 80;
}
server {
    if ($host = <...>) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name <...>;
    listen 80;
    return 404; # managed by Certbot
}

在本地我没有这样的问题，我的本地配置也有try_files $uri =404; 排。 怎么了？

我试过了

location / {
    try_files $uri =404;
}

反而

location / {
    try_files $uri $uri/ =404;
}

，没有帮助。

Answer 1

更改了try_files $uri $uri/ =404; 到try_files $uri $uri/ /index.html; 。

Answer 2

尝试这个：

server{    
 error_page 404 $scheme://$host/404;
}