vue.js单页面 如何遇到404页面如何正确返回状态码404

客户端配置（Vue.js）

在客户端，你可以在 Vue 路由器（vue-router）中设置一个捕获所有未定义路由的规则，显示一个 404 组件，但请注意这不会改变 HTTP 状态码。

import Vue from 'vue';
import Router from 'vue-router';
import NotFound from './components/NotFound.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    // ...其他路由...
    { path: '*', component: NotFound }
  ]
});

export default router;

在这种配置下，当用户访问一个不存在的页面时，他们会看到一个 404 错误页面，但浏览器的 HTTP 状态码仍然是 200。

结论：并没有解决问题

尝试通过Nginx配置解决问题

在 Nginx 中，你可以配置一个规则来捕获所有的前端路由请求，并将它们重定向到 Vue 应用的入口点（通常是 index.html）。然而，要返回 404 状态码给浏览器而不是简单地重定向到首页或错误页面，你需要一些额外的逻辑。

这里是一个基本的 Nginx 配置示例，它处理了将所有非静态文件请求重定向到 index.html，同时保持对静态文件的正常访问：

server {
    listen 80;

    server_name example.com;
    root /path/to/your/vue/app;

    index index.html;

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

这个配置确保了所有的前端路由都会被正确处理，但它并不会返回 404 状态码。要实现返回 404 状态码的逻辑，需要在 Vue 应用中添加服务端渲染的支持；

继续查询资料得出结论如下：

对于纯 Vue.js 开发的单页面应用（SPA），在客户端直接返回 404 状态码是不可能的。这是因为 SPA 的工作原理和服务器配置有关。以下是主要原因和概念的总结：

1. SPA工作原理: 在 Vue.js 或任何其他 SPA 框架中，页面的路由是由客户端 JavaScript 控制的。当用户在应用内部导航时，实际上并没有向服务器发送新的页面请求。相反，Vue.js 动态地在客户端更新内容，这意味着服务器仅在最初加载应用时参与。

2. HTTP状态码: HTTP状态码是由服务器在响应HTTP请求时发送的。在SPA中，大部分页面导航不涉及到新的HTTP请求，因此没有机会从服务器返回新的状态码。服务器通常只在加载整个应用时返回200状态码。

3. 服务器配置: 尽管可以在服务器（如Nginx或Apache）上进行配置，以便于对于某些路由返回404页面，这只适用于服务器接收到实际HTTP请求的情况。对于Vue.js内部的路由，服务器不参与，因此无法直接返回404状态码。

4. 服务端渲染（SSR）: 要在SPA中实现类似的功能（例如，对于不存在的路由返回404状态码），需要使用服务端渲染（SSR）。SSR允许在服务器上渲染页面，这意味着服务器可以根据请求的路由返回不同的状态码。但这需要使用像Nuxt.js这样的框架来实现，这不再是纯 Vue.js 应用。

5. SEO和用户体验: 尽管不能直接在客户端返回404状态码，但你可以在Vue.js应用内部展示一个404错误页面，以提升用户体验。对于SEO，最好的做法是使用SSR或预渲染页面。

在次尝试nginx方案

1. 基本 SPA 配置: 配置 Nginx 以重定向所有非静态文件请求到 index.html。
2. 自定义 404 页面: 添加一个配置来处理不存在的路由，展示一个自定义的 404 页面。

server {
    listen 80;
    server_name example.com;
    root /path/to/your/vue/app;

    index index.html;

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

    # 自定义404页面
    error_page 404 /custom_404.html;
    location = /custom_404.html {
        internal;
    }
}

在这种配置中，当用户访问一个不存在的页面时，他们会看到 custom_404.html 页面。但请注意，这个方法不会改变HTTP状态码为 404，除非该请求是直接发送到服务器的（例如，用户直接输入一个不存在的URL）。

总结:

• 对于静态托管的 Vue.js SPA，可以通过配置 Web 服务器（如 Nginx）来显示自定义的 404 页面，但这通常不会改变HTTP状态码（除非是直接的请求）无法实现返回404状态码。

后续解决方案

• 要彻底解决这个问题，需要结合服务器端渲染（SSR）
• 通过vue重定向到指定服务端接口，接口返回404 html，并且修改respose code