首页 > Windows开发 > 详细

vue,react,angular,windows 环境本地配置单页面应用

时间:2017-07-30 18:39:44      阅读:681      评论:0      收藏:0      [点我收藏+]

一、起因:项目使用VUE,和react。构建单页面应用。在nginx的环境下只有一个index.html入口。这时候默认能够访问到vue,和react 路由

配置中的首页。内部连接也能够跳转但是不能给刷新也面。刷新页面后就为变为404页面。

二、原因:nginx 在解析路径的时候:比如: localhost/a     这个路由。其实nginx 在解析路径 时候。为去root根路径下去找a文件。但是找不到。所有就会报错。

但是在单页面应用中localhost/a 其实是 VUE, 和react  内部制定的路由规则。这时候。就出现问题了。该如何配置呢? 

 

三、配置文件。

 server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /home {
            rewrite .* /index.html break;
            root   html;
        }
        location /strategy {
            rewrite .* /index.html break;
            root   html;
        }
        location /wealthMange {
            rewrite .* /index.html break;
            root   html;
        }
        location /aboutUs {
            rewrite .* /index.html break;
            root   html;
        }
        location /contacts {
             rewrite .* /index.html break;
             root   html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }    
    }

通过rewrite .* /index.html break;把一切path重写为/index.html,break很重要,它使得url的匹配结束,最终服务返回的文档其实是/htm/index.html

那个break决定了浏览器里的url是不变的,而http响应的文档其实就是index.html,而浏览器上的path,会自动的被vue-router处理,进行无刷新的跳转,我们看到的结果就是path对应了那个页面!

location /home {
            rewrite .* /index.html break;
            root   html;
}
当我们浏览器输入这样 localhost/home 是 重定向为 rewrite .*/index.html break; root html; 相当于我们home 页面。就样就OK 啦。

 

vue,react,angular,windows 环境本地配置单页面应用

原文:http://www.cnblogs.com/createGod/p/7259958.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!