踩坑-填坑之 : 单页面应用框架刷新404问题

项目打包部署到服务器上,可以正常跳转,但是不能刷新;项目在本地可以正常运行,在测试服务器也可以正常显示,刷新;从服务器配置上查看,发现运维忘记配置了一项.
问：出现了什么问题。现象是什么？
答：比如你在浏览器中直接访问www.lyy.com/demo/login会404。但如果你先访问www.lyy.com/demo/index.html后再点“登录" 跳转到www.lyy.com/demo/login是正常显示登录页面的。这时你f5”刷新“又会出现 404了。。

问：为什么会出现404呢，第一次访问这个url就没问题啊？
答：这就是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如：react、vue等。
单页面简单来说就是访问所有资源路径、其实页面内容只有一个（一般是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