Vue 3 项目怎么在初始化阶段配置统一的 404 与 500 错误页-Vue.js-PHP中文网

vue 3 项目需分层配置404和500错误页：前端路由未匹配时通过/:pathmatch(.*)*重定向至/404组件，api响应500时在请求拦截器中调用router.push('/500')，二者共用统一errorlayout布局，并配合nginx的try_files $uri $uri/ /index.html实现刷新不404。

vue 3 项目怎么在初始化阶段配置统一的 404 与 500 错误页

Vue 3 项目在初始化阶段配置统一的 404 和 500 错误页，核心是分两层处理：前端路由未匹配时的 客户端 404（即访问不存在的前端路径），以及后端响应失败时触发的 服务端错误跳转（如接口返回 500）。两者机制不同，需分别配置，但可共用同一套 UI 组件。

配置前端路由级 404 页面

这是解决“刷新子页面变 404”或“直接输入 URL 白屏”的关键，适用于 Vue Router 的 history 模式。

在路由配置数组末尾添加通配符路由 { path: '/404', component: () => import('@/views/NotFound.vue') } 和兜底重定向 { path: '/:pathMatch(.*)*', redirect: '/404' }
确保该路由定义在所有具体路由之后，否则会提前拦截其他路径
推荐使用 createWebHistory() 时传入 base 路径（如 createWebHistory('/admin')），避免部署到子路径时路由错位
注意：这个 404 不是 HTTP 状态码 404，而是前端路由层面的“未找到”，不触发真实网络请求