nginx 配置解决 ---react 、vue 单页面路由之后刷新404---问题

nginx中文文档：http://www.nginx.cn/doc/

nginx官网：http://nginx.org/en/docs/

Nginx开发从入门到精通：http://tengine.taobao.org/book/index.html

1、问题现象？

答：在浏览器中直接访问www.xxx.com会正常显示页面，先访问www.xxx.com后再点“demo" 跳转到www.lyy.com/demo是正常显示demo页面的。这时在此页面f5”刷新“就会出现 404了。

2、分析出现404现象的原因？

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

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

然而当你访问www.xxx.com/demo其实web站中并没demo这个页面的资源（demo只是给js框架路由用的）。所以就报404啦！

3、怎么解决这个问题，才能不让他404，又能让js框架正确路由呢？

答：分析出产生问题的原因就很好解决这个问题了。

       解决：满足以下两点就行：

       1.刷新时要保证url路径不变。即不能用重定向去访问index.html，因为url会变。变了js框架就没法路由，因为不知道你上次是哪个url了。

         2.服务器响应的内容一定要是index.html，因为index.html这里加载了js框架和初始化一些东西。

具体做法：用nginx配置，不改变url的情况下响应index.html资源的内容。

	location /demo {
	          rewrite /index.html break;
              root 根路径;
        }
 
		
	location /static {
              alias   根路径/static;
              index  index.html;
       }

这里有个很重要的点：break 

break 并不是重定向说告诉浏览器你重新去访问index.html。而是说内部去找  /index.html页面。去root对应的目录下找。找到就返回页面内容。这样就保证了在url不变的情况下固定返回index.html内容。如果在root对应的目录中没找到index.html就会404了。和break 同级的命令lest，才是让浏览器重定向的，即是重新发出请求。