admin 管理员组

文章数量: 1184232

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

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

  1. 点开链接后，发现报错的是一个js文件，clss类的问题，并没有被编译考虑到，是不是在ie中一些语法，使用webpack的bable没有办法完全的编译，又下载使用 babel-polyfill 结果还是现在一样的错误，并未解决问题
  2. 开始看报错的源码，经过搜索与排除发现是在 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 使用的区别和用法
  3. 找到问题后，改变插件的使用，把vuex-persist 换成 vuex-persistedstate 完美解决问题
  4. 对比两个插件，发现vuex-persist是TypeScript类型的，vuex-persistedstate是JavaScript类型，默认的配置webpack没有去编译TypeScript，所以没有转换

结论：webpack编译的类型不对

 

 

本文标签： 浏览器 苹果 链接 项目 手机

版权声明：本文标题：使用vuex-persist苹果手机微信浏览器打开项目链接白屏 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1743814137a2484153.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。