vue项目history模式刷新404问题

admin管理员组

文章数量:1487745

vue项目history模式刷新404问题

vue项目history模式部署到服务器后 ，根路径访问没有问题，但是进入其他功能再刷新页面就会出现404，因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法，只需要加上这段配置：

nginx配置内容：

代码语言：javascript代码运行次数：0运行复制

location / {
  try_files $uri $uri/ @router;
  index index.html;
}

location @router {
  rewrite ^.*$ /index.html last;
}

apache配置内容：

代码语言：javascript代码运行次数：0运行复制

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.html [L]

这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件

解析为什么会这样（针对路由在history模式下）：

因为vue项目中路由hash模式改为了history模式，由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下当刷新页面之后浏览器会直接去请求服务器，而服务器没有这个路由，于是就出现404。

因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。

想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

也就是在服务端修改404错误页面的配置路径，让其指向到index.html。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2024-10-15，如有侵权请联系 cloudcommunity@tencent 删除前往查看history服务端服务器路由配置

本文标签： vue项目history模式刷新404问题