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

Question

我已经建立了我的VUE-CLI版本3 SPA让我routes.js文件没有发现任何请求都将默认为我的404视图显示在官方documentation：

插入附近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#caveat

Answer 1

我认为这是类似于节点解决方案 - 你应该重复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的配置不是很好，但它的工作原理。

Answer 2

我这打破了Vue公司的生态系统否则不会工作，也可以采取很多的努力来解决的简单方法。

使你的Vue公司的路由器以下路线：

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

该PageNotFound组件应该有下面的代码：

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

nginx的配置应该得到/404/路线返回404：

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

我不认为它会在服务器端呈现的环境中工作。在这种情况下，你可能需要把包含在window.location.href方法mounted声明。