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;。

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

1 个答案: