使用vuex-persist苹果手机微信浏览器打开项目链接白屏

如题：苹果手机微信浏览器和电脑浏览器打开项目链接白屏，而且ie11浏览器也不能够正常打开，报错语法错误，安卓手机却可以正常的打开链接显示？

排除过程，以为是微信内置浏览器不支持，想到会不会是兼容的问题，然后使用ie浏览器查看，发现和微信是一样的情况，控制台有报错，开始处理报错。

点开链接后，发现报错的是一个js文件，clss类的问题，并没有被编译考虑到，是不是在ie中一些语法，使用webpack的bable没有办法完全的编译，又下载使用 babel-polyfill 结果还是现在一样的错误，并未解决问题
开始看报错的源码，经过搜索与排除发现是在 node_modules 文件夹中的一个插件 vuex-persist js的问题（见下图）
1. 那为什么会用这个插件呢?
2. 因为当前做的这个移动端的项目是给机构做的一个类似测评系统的考试，是不运行用户在考试的时候，后退页面，和刷新页面，后退可以使用
  beforeRouteLeave 去做阻止，刷新只能监听按键的f5，没有办法控制浏览器的刷新，然后就想到，用户刷新的时候，前面的数据，还是要有所保存的，然后就使用了 vuex ，但是vuex会在刷新页面的时候，重置state的数据，这就不是我们想要的了，然后我们引入了一个vuex-persist插件解决这个问题
3. vuex的优劣势
  1. 优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到
  2. 劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。
  3. 为了克服这个问题， vuex-persist 和 vuex-persistedstate出现了~~
4. vuex-persist 和 vuex-persistedstate 原理
  1. 插件在每次mutation的时候将数据保存，存到localStorage，sessionStorage，cookie有中（具有getItem ，setItem ，removeItem一般方法的对象）
  2. 刷新页面的一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~
  3. vuex-persist 和 vuex-persistedstate 使用的区别和用法
找到问题后，改变插件的使用，把vuex-persist 换成 vuex-persistedstate 完美解决问题
对比两个插件，发现vuex-persist是TypeScript类型的，vuex-persistedstate是JavaScript类型，默认的配置webpack没有去编译TypeScript，所以没有转换

结论：webpack编译的类型不对

使用vuex-persist苹果手机微信浏览器打开项目链接白屏相关推荐

解决微信环境下无法通过链接唤起App Store、微信访问App Store 链接白屏问题
背景: 上周五临下班前,反馈群提出了个BUG(使用IOS在微信打不开App Store, 在浏览器下可以打开)并抛出了两个链接. 一个链接用于配置公众号的模板链接 http://xxxx.com/?p ...
只能在微信浏览器打开的链接，如何查看源码
表示哭晕在厕所,折腾了整整一下午,由于最近接了一个任务,要做一个类似结构的公众号,想看一眼那个链接的网页源码,然而-- 如图,真***的,这可怎么破?js上进行验证了,废话少说,如下进入正题-- 查了 ...
HTML页面只能使用微信浏览器打开
看到一个项目,刚开始还以为是APP,只能用微信打开.仔细看了下原来是个web项目,只是禁用了其他浏览器打开,只能用微信浏览器打开.加上前端页面用了类似mui的模板,就更像APP了. 百度了下,参考 h ...
h5页面提示只能在微信浏览器中打开_h5移动端开发判断只能在微信浏览器打开...
在开发的过程中可能会遇到项目只能在微信浏览器打开的需求,那么只需要在项目的页面添加以下代码即可(单页面应用在入口文件添加即可). var ua = navigator.userAgent.toLowe ...
苹果手机微信中打开app下载链接跳转不到app store怎么办
使用微信推广的用户经常都会遇到推广链接被拦截导致无法下载app的情况,通常这种情况微信会给个提示 "已停止访问该网址" ,那么导致这个情况的因素有哪些呢,主要有以下三点: 1.网页 ...
限制网页只能在微信浏览器打开
效果:判断网页是否是在微信浏览器打开: $(function(){//判断页面是否是在微信浏览器打开//对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器var userag ...
设置网页只允许在手机微信浏览器打开
只能在手机微信浏览器打开 js前端的代码 $(function(){var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.index ...
微信浏览器打开zip文件_愚蠢的怪胎技巧：使用7-Zip作为快速的文件浏览器
微信浏览器打开zip文件 One of the most irritating things in Windows is the file browsing experience- it's slo ...
聊聊微信内打开H5链接时如何自动跳转外部浏览器打开
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面跟大家聊聊微信内如何实现自动跳转外部浏览器打开网页功能目的生 ...

使用vuex-persist苹果手机微信浏览器打开项目链接白屏

使用vuex-persist苹果手机微信浏览器打开项目链接白屏相关推荐

最新文章

热门文章