Vue站点分享路由链接时出现Netlify 404错误如何解决？

架构老林

2026-10-5

核心原因

你使用了Vue Router的history模式，该模式依赖HTML5 History API实现前端无刷新路由跳转，仅在用户从站点根路径内跳转时生效。当你直接访问子路由、刷新页面或分享路由链接时，请求会先发送到Netlify静态资源服务器，服务器会尝试查找对应路径的静态文件（如访问/centro-de-estudios会查找centro-de-estudios.html），而单页应用仅存在根目录的index.html入口文件，没有对应路径的静态资源，因此触发Netlify默认的404报错。
另外你的路由配置存在规则优先级错误：通配符*对应的404路由放在了业务路由前面，Vue Router会按从上到下的顺序匹配路由，所有非根路径的请求都会优先命中404规则，导致后面定义的/centro-de-estudios、/nosotras路由永远无法生效。

解决方案

修正Vue Router配置
- 首先补充NotFound组件的导入语句
- 将通配符*的404路由移动到routes数组的最后一位，修正后的配置如下：

import Vue from "vue";
import VueRouter from "vue-router";
import CentroEstudios from "../views/CentroEstudios.vue";
import Nosotras from "../views/Nosotras.vue";
import Index from "../views/Index.vue";
// 补充NotFound组件导入
import NotFound from "../views/NotFound.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "/centro-de-estudios",
    name: "Centro de Estudios",
    component: CentroEstudios,
  },
  {
    path: "/nosotras",
    name: "Nosotras",
    component: Nosotras,
  },
  // 404路由放在最后
  {
    path: "*",
    name: "NotFound",
    component: NotFound,
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;