Vue 3 项目需分层配置404和500错误页：前端路由未匹配时通过/:pathMatch(.*)*重定向至/404组件，API响应500时在请求拦截器中调用router.push('/500')，二者共用统一ErrorLayout布局，并配合Nginx的try_files $uri $uri/ /index.html实现刷新不404。
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，而是前端路由层面的“未找到”，不触发真实网络请求
捕获并跳转服务端 500 错误页
当 API 请求返回 500、401、403 等状态码时，需主动跳转到自定义错误页，而不是停留在当前界面或报错白屏。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在请求封装层（如 useRequest 或 axios 实例）中统一拦截响应：
if (error.response?.status === 500) router.push('/500') - 单独配置
{ path: '/500', component: () => import('@/views/ServerError.vue') }路由 - 若使用 Pinia，可在 store 中定义全局错误状态，在根组件监听并跳转，增强一致性
- 避免在每个
.catch()里重复写router.push，容易遗漏
配套 Nginx 或 Spring Boot 的静态资源兜底
仅靠前端路由无法解决直接访问 /user/profile 刷新 404 的问题——那是服务器找不到对应文件。必须让服务器把所有非 API 请求都返回 index.html，交由 Vue Router 处理。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置示例（放在
location /块内）：try_files $uri $uri/ /index.html; - 若部署在子路径（如
/home），则打包时设置base: '/home/'，Nginx 对应加location ^~ /home/ { try_files $uri $uri/ /home/index.html; } - Spring Boot 用户：不要用
addViewController("/*")，改用ResourceHttpRequestHandler+ 自定义WebMvcConfigurer，对非静态资源路径返回 index.html
复用 UI 组件与样式统一
404 和 500 页面可以共享布局，提升维护效率和视觉一致性。
- 新建
src/views/ErrorLayout.vue，包含通用标题、插图、按钮、返回首页逻辑 -
NotFound.vue和ServerError.vue都只负责传递类型参数，内部<ErrorLayout type="404"></ErrorLayout> - 在
App.vue中通过v-if="$route.path.startsWith('/404') || $route.path.startsWith('/500')"隐藏默认导航栏 - 可配合
meta字段控制页面 title 和 SEO 描述，例如{ path: '/404', meta: { title: '页面找不到了' } }
