Vue路由history模式采坑：Nginx配置Vue项目刷新页面404

总是幸福的老豌豆

于 2021-05-31 17:11:44 发布

阅读量1.3k

点赞数

分类专栏：日常工作总结文章标签： vue nginx

本文链接：https://blog.csdn.net/qq_32370913/article/details/117413742

版权

日常工作总结专栏收录该内容

1143 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

在部署Vue项目并使用history模式时，刷新页面会出现404错误。这是因为history模式下的路由变更并未发起HTTP请求，刷新时服务器找不到对应路径。为解决这个问题，可以在Nginx配置中设置，将所有路径重定向到index.html，通过Vue路由进行处理。具体做法包括在Vue项目同级目录按路由创建实体文件夹，并在Nginx配置中配置对应的try_files指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近部署Vue项目时，刷新页面报404问题

404现象：

vue-router默认是hash模式，我们项目需要部署到微信里面，所以只能使用history模式，此模式有一个问题就是刷新页面出现404，查询一些资料发现history模式下，是动态的通过js操作window.histroy来改变浏览器地址栏里的路径，并没有发起http请求，所以当我们刷新浏览器时，会发起http请求，但是这个这个路径不在服务器上，所以出现404

问题解决

location / {
   
　　root   "此地方添加Vue项目文件夹的路径，比如xxx/xxx/dist";
　　in

了解本专栏

超级会员免费看