vue使用history模式页面空白

之前负责了一个项目，使用的是vue。为了避免在地址链接的时候出现问题后端要求去掉#号，也就是使用history模式。

更改history模式后打包部署后发现页面空白。查询了下官网的文档资料https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子后端需要同步配置才能使用history模式。

但是依旧不可用，查了下由于我是在子目录下的，所以需要在路由配置文件添加一行代码。

ps: 虽然这样解决了问题，但是这样的配置会导致404页面无法打开，需要额外配置404页面

最后记录下Vue的History模式和Hash模式的区别

Hash模式是会带有#号的，浏览器向服务端发送请求时，只会把#前的链接发送给服务端，所以后端并不需要处理，并且页面可以刷新不会返回404之类的页面。

但是这个#号往往会给我们来带一些奇怪的bug，比如生成二维码的时候会自动过滤掉#后面的参数啊，微信登录，已经分享的时候都会把#后面的参数或者路径都过滤掉。
History模式跟Hash最大的区别就是没有#，不怕前进，不怕后退，就怕刷新，当刷新时，如果服务器中没有相应的响应或者资源，就会报错404。

摘抄自以下两篇内容

https://www.jianshu.com/p/bfffb4b8c9fa

https://zhuanlan.zhihu.com/p/127186558

vue使用history模式页面空白相关推荐

解决Vue的history模式刷新页面出现404的问题
解决Vue的history模式刷新页面出现404的问题路由的两种工作模式 (一).hash模式地址中永远带着#号,不美观若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合 ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...
nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
vue框架开发出现页面空白、白屏的解决方法总汇
vue框架开发出现页面空白.白屏的解决方法总汇参考文章: (1)vue框架开发出现页面空白.白屏的解决方法总汇 (2)https://www.cnblogs.com/love314159/artic ...
新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
Vue路由history模式踩坑记录：nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理问题1思考: vue-route ...
Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...

vue使用history模式页面空白

vue使用history模式页面空白相关推荐

最新文章

热门文章