如何使用nginx服务器处理vuejs SPA中的404错误请求

Question

我已经设置了我的 vue-cli 版本 3 SPA，以便在我的 paths.js 文件中找不到的任何请求将默认为我的 404 视图，如官方文档中所示：

插入到文件底部附近routes.js：

{ // catches 404 errors
  path: '*',
  name: '404',
  component: () => import(/* webpackChunkName: "NotFoundComponent" */ './views/NotFoundComponent.vue'),
},

插入nginx配置文件：

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

这成功地提醒用户他们请求的页面不存在。

我的问题：

我希望错误 404 组件返回 404 响应标头（当前返回 200 状态代码），并将此错误记录到 nginx error.log 文件中。我想这只能通过使用 nginx 配置来实现。有人实现这个目标了吗？

我注意到这个问题在 vue-cli 官方文档的以下页面中得到解决，但它只涉及节点 Express 服务器而不是 nginx：https: //router.vuejs.org/guide/essentials/history-mode。 html#警告

Answer 1

我认为它类似于 Node 解决方案 - 您应该在 nginx 配置中重复所有路由以正确返回 404 状态代码，主要思想是您应该在位置中使用“等于”修饰符并定义error_page返回相同的index.html文件但具有 404 状态代码， 例子：

server {
    listen       80;
    server_name  localhost;
    root /my/dir/with/app
    error_page  404 /index.html;

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

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

    # example nested page
    location = /books/authors {
        try_files $uri $uri/ /index.html;
    }

    # example dynamic route to access book by id
    location ~ /books/\d+$ {
        try_files $uri $uri/ /index.html;
    }
}

也许这个配置可以简化或改进，因为我不太擅长 nginx 配置，但它可以工作。