部署在Render的Vue.js SPA子页面刷新/直接访问报404问题

问题根因 #

当Vue Router使用createWebHistory（HTML5 history模式）时，前端路由的路径（如/services/video）并非服务器上真实存在的文件路径。本地开发时Vue的dev-server会自动将所有路由请求转发到index.html，但Render的静态托管服务默认会尝试匹配对应文件，找不到就返回404。

解决步骤（Render平台配置） #

Render的静态站点支持配置SPA回退，具体操作如下：

• 登录Render控制台，进入你的Vue应用项目页面
• 点击左侧菜单栏的设置
• 找到构建与部署区域，滚动到静态站点部分
• 在重写规则中添加一条规则：
  • 源路径：*
  • 目标路径：/index.html
  • 类型选择：Rewrite（重写）
• 保存设置，重新部署应用

所有未匹配到真实文件的请求都会被转发到index.html，由Vue Router接管路由处理。

路由配置优化（可选） #

你的路由配置中有两条重复的兜底路由：/:catchAll(.*)和/:pathMatch(.*)*，保留一条即可，建议保留Vue Router官方推荐的/:pathMatch(.*)*写法，调整后的路由数组如下：

routes: [
  { path: "/", name: "home", component: index },
  { path: "/blog", name: "blog", component: () => import("../views/blog.vue") },
  { path: "/blog/:slug", name: "article", component: () => import("../views/article.vue") },
  { path: "/about", name: "about", component: () => import("../views/about.vue") },
  { path: "/services/photo", name: "photo", component: () => import("../views/Photo.vue") },
  { path: "/services/video", name: "video", component: () => import("../views/Video.vue") },
  { path: "/legal", name: "Legal", component: () => import("../views/legal.vue") },
  { path: "/legal/:id", name: "Legal article", component: () => import("../views/legal-article.vue") },
  // 仅保留一条兜底路由
  { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
]

验证 #

配置完成后重新部署，刷新子页面或直接输入子路径URL，即可正常加载对应页面，不再出现404错误。

内容的提问来源于stack exchange，提问作者sofies