vue先hash 模式部署项目,然后开启histroy模式 ,引发的几个问题以及histroy模式的开启方式、优点
2017-12-25 12:52
921 查看
前言:
vue路由有一个HTML5 History 模式,这个模式要在路由里面另外开启的,很多人在刚使用路由的时候之前不知道这个模式,所以并没有启用,然后就把项目部署上去了,因为这个模式还是有挺多优点的,最后还是会开启这个模式。然而因为之前使用hash模式再改为histroy模式还是有些问题的,我已经踩过坑了,然后把这几个问题写出来。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。
本文首发于我的个人blog:obkoro1.com
开启history模式:
如果不开启的话,路由默认是hash模式,开启这个模式前端的工作也很简单,如下:mode: 'history' //在路由那里配置一下这个
最后需要后端的做一些配置配合,这里可以参考一下文档给的栗子。
history模式的优点:
url变成真正的url,url看上去更好看。http://yoursite.com/#/a/b //hash模式 http://yoursite.com/a/b //history模式
可以使用vue-router的滚动行为,这个用来记忆进入其他页面之前的位置非常好用,配置一下就可以直接使用了,前提是开启histroy模式。
类似项目引入微信js-sdk的时候,一些操作是对url是有要求,url不能带上’#’,如果没有开启histroy模式,很可能会导致问题。
像vue-cli的配置,都是以路由开启history模式的标准来配置的(下面会讲到一个栗子),没有开启的话,自己要另外配置。
先hash模式,后histroy模式
就像开头说的,这里的问题指的是:先用hash模式部署项目到线上,然后再开启histroy模式,由此引发的一些问题。1.找不到资源问题:
在hash模式下面,直接打包的话,会导致找不到css、js和图片资源,然后经过百度之后,做出了如下截图的配置操作,更改assetsPublicPath:'/'为
assetsPublicPath:'./'
在hash模式下,像上面那么配置就没有问题了。当时我还以为vue-cli配置有问题,实际上,人家才没有问题呢,是我们自己没有开启history模式的问题。
然后开启了histroy模式之后,因为我们之前更改了assetsPublicPath属性,所以要把那个
.给去掉,改回来:
assetsPublicPath:'/'
2.请求带上路由,导致请求失败
正确的请求是:
http:www.xxx.com/api/接口 //api是我通过proxyTable转发地址的代理名字
开启histroy模式之后:
在二层的路由里面会出现这种情况:路由是:http:www.xxx.com/a/b http:www.xxx.com/api/a/接口 //这就导致了请求失败,要把a也去掉才是正确的
解决方式是:
因为我用的是axios,所以可以在全局请求中设置一个baseURL,这个baseURL就是项目的网站地址(http:www.xxx.com),然后二层的路由也会自动去掉前面的a和b。
3.cookie问题
这个实际上不是个问题,完全是自己作的,我把项目分为两层。所以从a登录,b那边刷新就会出现没有cookie的情况。两层路由 http://yoursite.com/a http://yoursite.com/b
这里是因为cookie能否拿到跟存储的路由位置是有关的,之前使用hash模式因为hash模式的url
http://yoursite.com/#/a/b,会统一存在http://yoursite.com下面。
而history模式cookie就会存在
http://yoursite.com/a或者
http://yoursite.com/b下面,另外一边就会没有cookiie。
解决办法:
不要分为两层,统一所有的路由都在一个路由地址下面。在项目的路由的根地址
path:'/'里面存cookie。
使用sessionStorage存信息,我就是用这个方法,使用方法。
sessionStorage只要在http://yoursite.com都可以访问的到,不管是存在a上面还是b上面。
后话
以上就是本文的所有内容,建议项目一开始还是直接跟后端说一下,开启histroy模式,省得后面的种种坑。上面的内容都是本人亲自踩坑之后的血泪教训,希望可以帮助到需要的朋友,最后Merry Christmas。最后:如需转载,请放上原文链接并署名。码字不易,感谢支持!本人写文章本着交流记录的心态,写的不好之处,不撕逼,但是欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我。
个人blog and 掘金个人主页
以上2017.12.25
相关文章推荐
- VS "安装和部署项目"生成的快捷方式问题
- tomcat 添加用户以及三种部署项目的方式
- 【iOS-Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏
- ws javaee实现方式以及TgsWebservice中 MQ发送延迟问题(柬埔寨项目)
- 关于项目部署,浏览器访问不到页面有关问题解决方式
- 【iOS-Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏
- maven自动部署项目以及常见问题解决
- maven项目发布到tomcat以及导包需要注意的几个小问题。
- eclipse部署web项目的几个小问题
- maven项目发布到tomcat以及导包需要注意的几个小问题。
- 【Eclipse】部署新项目的几个出错问题与解决方案
- ExtJs项目部署到IIS开启GZIP支持遇到的问题
- maven项目发布到tomcat以及导包需要注意的几个小问题。
- 服务器部署以及第一次项目部署问题
- 【Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏
- linux 下部署基于speedPhp的项目出现的问题解决方式
- tomcat部署工程项目的三种方式_以及一个tomcat部署多个项目
- 【iOS-Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏
- eclipse配置tomcat,以及部署项目到tomcat(解决项目部署后,webapps中无项目文件问题)
- 【iOS-Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏