vue项目history模式刷新404问题解决办法
更新时间：2023年11月14日 08:41:51 作者：FGGIT
这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下
前言
vue项目history模式部署到服务器后 ，根路径访问没有问题，但是进入其他功能再刷新页面就会出现404，因为你没在nginx或者apache配置上面加上重定向跳转。
解决办法，只需要加上这段配置：
nginx配置内容：
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}apache配置内容：
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，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。
想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
也就是在服务端修改404错误页面的配置路径，让其指向到index.html。
总结
到此这篇关于vue项目history模式刷新404问题解决办法的文章就介绍到这了,更多相关vue history模式刷新404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数，所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化2021-10-10
这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue项目通过vue-i18n实现国际化方案,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
本文将利用Vue+TailWindcss实现一个简单的闯关小游戏，玩家须躲避敌人与陷阱到达终点且拥有多个关卡，感兴趣的小伙伴可以了解一下2022-04-04
elementUI select组件value值注意事项详解
这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍了elementUI el-radio 无法点击的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue element table表格相同名称列合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue项目中定义全局变量、函数的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue-cli3单页构建大型项目方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论