nginx 配置解决 react 、vue 单页面刷新404问题

时间: 2018-05-25阅读: 3626标签: 404

问:出显了什么问题。现象是什么?

答:比如你在浏览器中直接访问www.lyy.com/demo/login会404。但如果你先访问www.lyy.com/demo/index.html后再点“登录" 跳转到www.lyy.com/demo/login是正常显示登录页面的。这时你f5”刷新“又会出现 404了。。


问:为什么会出现404呢,第一次访问这个url就没问题啊?

答:这就是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如:reactvue等。

单页面简单来说就是访问所有资源路径、其实页面内容只有一个(一般是index.html)。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片段)进行逻辑处理和页面渲染。

所以当你访问www.lyy.com/demo/login 其实web站中并没login这个页面资源(login就是让框架路由用的)。所以就报404啦!~~


问:那刷新时我们怎么处理才能不让他404、又能让js框架正确路由呢?

答:其实理解了为什么出现这个问题就很好解决了,保证2点就行:

1.刷新时要保证url路径不变。。。言外之意就是不能用重定向去访问index.html,因为url会变。变了js框架就没法路由。因为不知道你上次是哪个url了。。。
2.服务器响应的内容一定要是index.html,因为index这里加载了js框架和初始化一些东西(这里说的不一定对哈,我是搞后端开发的,前端框架没了解过,只是猜测!~~)。


总结:不改变url的情况下响应index.html资源的内容。   好办! 用nginx配置下就好了嘛。

location /demo/ {  
    rewrite .* /index.html break;  
    root /data/build;  
}   
location /static {  
    alias   /data/build/static;  
    index  index.html;  
}

这里有个很重要的点:break 

break 并不是重定向说告诉浏览器你重新去访问XXX.html 。。而是说内部去找  /index.html页面。去 /data/build 目前下找就好。找到就返回页面内容(这不就是我们要的index.html的内容啊),浏览器是无感知的。这样就保证了在url不变的情况 下固定返回index.html内容啦。。如果在/data/build中没找到index.html就会404了。


和break 同级的命令还有lest:这是是让浏览器重定向的,就是重新发出请求。


参考:http://blog.sina.com.cn/s/blog_4f9fc6e10102ux0w.html
原文:https://blog.csdn.net/a20023930/article/details/80436663
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/821

关闭

vue刷新404

利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!

网页错误404 not found的解决方法

你是否在使用浏览器打开网页的时候会提示404 not found的情况,导致网页打开失败,留下一大堆英文字母。现小编就和大家介绍XP网页错误404 not found的解决措施。

Vue.js项目在apache服务器部署后,刷新404的问题

原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源

vue路由history模式刷新页面出现404问题

vue hash模式下,URL中存在#,用history模式就能解决这个问题。但是history模式会出现刷新页面后,页面出现404。解决的办法是用nginx配置一下,在nginx的配置文件中修改

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!