问题描述
之前vue项目采用的是hash history，即url地址类似http://test.com#my-router, #后面的表示前端路由，此时刷新浏览器是没有问题的，因为依旧访问的是index.html页面，该页面是物理存在的，所以不会404，但将vue-router的路由样式改成非hash history模式时, 即url地址类似这样http://test.com/my-router,此时如果刷新浏览器会变404，为啥? 因此此时浏览器实际是尝试访问http://test.com/my-router/index.html页面，实际并不存在这个页面，所以404
如何解决
第一种
location / {
root E:\doc-site\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
try_files $uri $uri/ @router; 完整的意思就是：尝试到网站目录找到用户访问的文件，如果第一个变量有对应的文件，则直接返回该文件，否则继续读取第二个变量，第二个变量也是执行同样的逻辑，如果还是没有找到，则返回 /index.html, 根目录下的index.html
第二种解决方式
location / {
# 站点根目录的物理路径地址
root E:\doc-site\dist;
# 默认访问的页面
index index.html index.htm;
# 解决404问题 `@router` 不是一定要叫这个名字，可以叫任意名字`@xxx`都可，但是需要与下面的`location @router`名字配对
try_files $uri $uri/ @router;
}
#路由配置信息 （解决页面刷新404问题）
location @router {
# `last`：本条重写规则匹配完成后，终止匹配后续重写规则，并重新发起请求继续匹配新的location URI规则；浏览器地址栏URL地址不变
rewrite ^.*$ /index.html last;
}
说明
$uri 是nginx的一个变量, 存放请求uri，如请求地址为http://test.com/hello/world, 则$uri代指/hello/world, $uri/则代指/hello/world/
try_files $uri $uri/ @router; 完整的意思就是：尝试到网站目录找到用户访问的文件，如果第一个变量有对应的文件，则直接返回该文件，否则继续读取第二个变量，第二个变量也是执行同样的逻辑，如果还是没有找到，则转入@router对应的location规则
关于 Nginx重写(rewrite), 详见: 实例演示Nginx重写(Rewrite)类型last、break、redirect和permanent的区别_nginx last-CSDN博客
参考文章
实例演示Nginx重写(Rewrite)类型last、break、redirect和permanent的区别_nginx last-CSDN博客
try_files uri/ @router_51CTO博客_try_files uri/
nginx解决vue路由history模式刷新404问题_nginx history路由模式访问登录页面404-CSDN博客
