vue hash改为history无法刷新或者404问题

需要运维同事的配合。。

一、问题描述及原因
1、问题描述
当我们将项目成功部署线上之后，按照路径正常访问项目时正常，在项目中使用目录跳转也正常，但是一旦刷新网页就会nginx404。并且直接使用二级路由的路径访问项目也是404

2、问题原因
首先官网对此有所解答，官网地址：vue-router Html5 History模式
大致来说就是vue-router模式使用hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。所以适配性更好，刷新页面时也不会有问题存在。但是他的缺点就是会添加#号，看起来就很不正常。

所以我们会选择更加优美的history模式：充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

但是页面刷新时，nginx就会根据你的路由寻找页面。

举个例子：
我的项目是部署在nginx的html文件夹的assembly目录下

 

 

那我访问时就是：
http://128.129.103.157/assembly

如果我进入二级目录时，当前路径就是：
http://128.129.103.157/assembly/about

这时我刷新浏览器的页面，nginx就会按照路径去找对应的页面，他就会去assembly文件夹下面的about文件夹下面去找index.html，但是我们的vue是单页面应用，根本就没有about文件夹，所以自然就找不到，也就会nginx 404。

二、解决方法
我们按照官方说法，修改nginx的配置，在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

意思就是：只要你浏览器访问的是我项目下的路径，就给我跳转到我项目中的那唯一一个index.html，这样就不会出现404，而且路由还会被vue-router所捕获到，仍旧在当前页面刷新，并不会被重定向到首页

1.项目部署在根目录时
也就是你的nginx的html目录里面就是你的vue项目
配置方式按照官网所说
在nginx.conf里面的server下面的

location / {
    root   html;
    index  index.html index.htm;
}

中增加一句
try_files $uri $uri/ /index.html;

最后应该是

location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

代表凡是匹配到 / 都会被跳转到 / 下的index.html

2.项目部署在自定义目录
一般我们都不会吧项目部署在根目录，因为我们部署的项目一般不止一个，而且部署在根目录不太易于管理
这样我们就要稍微修改一下配置
在
location / {undefined
}

location /assembly/ {
    try_files $uri $uri/ /assembly/index.html;
}

 

 

你就将 ‘assembly/’ 替换成你的 ‘文件夹名称/’ 即可
如果是多级目录，就依次在后面拼接

配置修改完成之后记得重启nginx
/usr/local/nginx/sbin/nginx -s reload

————————————————
版权声明：本文为CSDN博主「程序员的脱发之路」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43845090/article/details/108923073