Vue.js 3手动修改路由触发404错误问题求助

这个问题的核心原因是Vue单页应用(SPA)使用前端路由：当你手动输入路由URL或刷新页面时，服务器会尝试寻找对应路径的物理文件，但这些路由仅存在于前端代码中，服务器找不到就返回404。需要配置服务器将所有请求重定向到index.html，由Vue Router处理路由。

Vercel 配置步骤 #

在项目根目录创建vercel.json文件，添加以下内容：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

将该文件提交到代码仓库，重新部署即可生效。

Netlify 配置步骤 #

方法一：通过配置文件 #

在项目根目录新建_redirects文件，写入：

/*    /index.html   200

提交文件后重新部署。

方法二：通过控制台配置 #

1. 登录Netlify控制台，进入你的项目
2. 依次点击 Site settings > Build & deploy > Redirects and rewrites
3. 点击 Add new redirect rule，填写：
   • Source path: /*
   • Destination: /index.html
   • Status code: 200
4. 保存后配置自动生效。

额外注意 #

如果你的Vue Router使用的是history模式（URL不带#），确保路由配置正确开启该模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 你的路由列表
  ]
})

如果使用默认的hash模式（URL带#），不会出现这类404问题，但history模式更符合常规URL规范，需要配合上述服务器配置使用。

内容的提问来源于stack exchange，提问作者shafikul-stackoverflow