Netlify部署Vue应用后直接访问路由出现404问题求助

问题场景 #

• Vue应用部署在Netlify后，根目录可正常访问，但直接输入如/start这类路由URL时会返回404；从首页通过按钮跳转至该路由则正常
• 路由配置使用createWebHistory()（history模式），未设置404 fallback路由
• 直接访问/privacy或/tos这类嵌套静态HTML文件的路由可正常打开，这类路由的组件通过iframe加载根目录下的静态HTML文件

解决步骤 #

1. 配置Vue路由的404 fallback #

在路由配置数组的末尾添加通配路由，将所有未匹配的请求导向自定义404页面：

const routes = [
  // 你的现有路由配置
  {
    path: '/:pathMatch(.*)*',
    name: 'error404',
    component: Error404
  }
]

const router = createRouter({                                                                         
  history: createWebHistory(),                                                                        
  routes                                                                                              
})

自定义Error404组件示例：

<template>
  <p>页面未找到</p>
</template>

2. 添加Netlify重定向规则 #

在项目的public目录下创建_redirects文件，写入以下规则：

/*    /index.html   200

执行npm run build后，该文件会被自动部署到网站根目录。Netlify会读取此规则，将所有未匹配静态资源的URL请求转发到index.html，再由Vue Router接管路由处理：

• 已定义的路由会正常渲染对应页面
• 未定义的路由会触发我们配置的404组件

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