4

我已经设置了我的 vue-cli 版本 3 SPA，以便在我的 routes.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 官方文档的以下页面中得到了解决，但它只涉及节点快递服务器而不是 nginx： https://router.vuejs.org/guide/essentials/history-mode。 html#警告

4

3 回答 3

4

我认为它类似于 Node 解决方案 - 您应该在 nginx 配置中重复所有路由以正确返回 404 状态码，主要思想是您应该在位置使用“equals”修饰符并定义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 配置，但它可以工作。

于 2018-09-24T09:34:33.753 回答
4

我通过打破 Vue 生态系统以简单的方式解决了这个问题，否则它将无法工作或需要付出很多努力。

在您的 Vue 路由器中创建以下路由：

{
  path: '*',
  name: 'PageNotFound',
  component: PageNotFound
}

该PageNotFound组件应具有以下代码：

<script>
export default {
  name: 'PageNotFound',
  created() {
    window.location.href = "/404/"
  }
}
</script>

/404/nginx 配置应在获取路由时返回 404 ：

server {
    ...
    location ~ ^/404/$ {
        return 404;
    }
    ...
}

我认为它不会在服务器端渲染环境中工作。在这种情况下，您可能需要将包含window.location.href在mounted方法中的语句。

于 2019-02-07T12:11:35.403 回答
1

对于遇到此问题并为您节省数小时头痛的人。

上述答案的注意事项

  1. 简单地用新的 URL（例如/notfound）重新加载页面并不能解决问题，因为这意味着潜在的蜘蛛已经收到 200。
  2. 简单地复制路线是一个半解决方案。这适用于永远不会更改的 URL，并通过检查 URL 结构的有效性。因此，例如，它可以检查书籍 IDbooks/123是否具有正确的格式，但无法检查books/123后端是否确实存在。

这里有两种方法可以解决上述问题

  1. 让 Nginx 向后端发出镜像子请求，以检查资源是否实际存在。然后总是返回 index.html 但带有来自子请求响应的状态。这对 Nginx 来说非常棘手，因为从设计上来说，它很难组合答案。
  2. 让后端 API 返回 index.html 的Accept: text/html. 然后 Nginx 只需要转发响应。

第一个解决方案对于不熟悉 Nginx 的人来说是一件很痛苦的事情。它需要使用 OpenResty 获取 Lua，然后你会再次遇到 Nginx 工作方式的各种怪癖。你最终会得到很多难以阅读的代码，如果你更想引入缓存，那就更加困难了。

第二种解决方案更容易。唯一可能的负面因素是，如果您当前拥有该 API，则无法从浏览器查看 API。

nginx.config（当 API 响应 index.html on 时Accept: text/html）

    location / {
      try_files $uri $uri/ @fallback;
    }

    location @fallback {
      rewrite ^(.*) /api$1 break;
      proxy_set_header "Accept" "text/html";
      proxy_pass http://localhost:8000;
    }

在这种情况下，Nginx 将首先尝试提供文件，如果它在本地找不到它，它将通过后备。

在回退中，我们重写 URI 以匹配后端服务器的期望。在此示例中，我api/在每个请求之前添加。然后我添加标头Accept: text/html，以便后端 API 将使用 index.html 而不是 JSON 进行响应。最后我们直接将响应返回给客户端。

这有以下好处：

  1. 它不依赖于 Nginx，因此可以与任何反向代理一起使用。最重要的是它不依赖代理服务器来拥有某些功能。
  2. 即使在没有运行 Nginx 的情况下也可以在开发过程中工作。
  3. 易于编写测试。index.html你只需要测试你的后端 API 以在给定Accept: text/html任何端点时吐出。
  4. 不需要您使用每个新端点手动更新 Nginx 配置。

此外，您可以更改配置以使 Nginx 在内部遵循重定向，甚至可能不必查看后端 API 以获取永远不会更改的 URL。

于 2020-05-22T18:16:25.103 回答