vue项目，刷新后出现404错误，怎么解决

名字很费劲2026-04-01 15:49

vue项目的网站，你点击按钮切换页面之后，你这时候刷新网站，就会发现出错了404.

vue项目的路由有两种模式，hash 和 history 。只有history模式才会遇到这个错误。

这是由于这两个模式的区别：

比如访问 about 页面：

因为hash模式的链接是这样的 site.com/#/about ，这个链接发给服务器，服务器访问的是/index.html，后面的 #/about 是锚点，js 会解析这个锚点从而进入正确的页面。
而history模式链接是这样的site.com/about ，这个链接发给服务器，服务器会去找 about.html 但是这个文件不存在，所以会404

我前面提过一个开源项目（thinkphp8+vue3开源项目，部署就能直接使用，论文查重+AIGC检测）,这个项目的前端就是vue3, 用的就是history模式。

查看文件 /src/router/index.rs

typescript 复制代码

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [

这里很明确，就是history模式。那他是怎么避免404问题的呢？

我们查看该项目的帮助文档，里面明确了需要设置伪静态

bash 复制代码

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

这里就很明确了，这里是一段 Nginx 脚本。文件不存在时把路径当参数传给 index.html 。这样问题就解决了