① Vue 部署上线清除浏览器缓存
vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。
② 如何清除缓存属性 keepalive vue
一般手机运行内存不足，或手机内存，手机存储空间不足的时候，手机都会出现这种提示的哦！
解决方法：
1.进入设置--存储——首选安装位置——选择用户空间（手机存储）。
2.把安装在系统空间的程序移动到用户空间中，设置——程序管理(或应用程序)——全部——点击程序—移动至用户空间（手机存储）。
3.做完以上操作之后建议你可以定期给手机清理下缓存，从而为手机释放一些空间，
3.也可以尽量卸载一些不必要的软件，以免占用手机内存。一次不要运行过多程序的，运行程序过多，运行内存可以不足的。
4.清理缓存的操作----长按关机键10秒直至进入完全关机状态，然后同时按住电源键跟音量减键，进入工程模式，通过音量键选择清理缓存选项，电源键确定，系统将自动清理缓存哦
③ 移动端Vue界面缓存处理
大家可以看到当重新进入列表页数据进行了刷新这明显不符合需求
查网络问同事知道了一个东西叫keep-alive于是决定使用这个内置组件试试.
然后吧发现问题确实能够得到结局但是出了个新问题如图:
问题1:界面虽然被缓存但是当退出到前一个页面再进入的时候界面还是被缓存状态,我觉得这是不合理的.
问题2:被缓存的界面从上个页面再次进入时动画效果不对.
基于这两个问题我也查了一些资料和博客,也总结了第二套方案
这个rank是用来判断当前组件所在的级别.
比如A组件->B组件 ->C组件,那么A的rank为1,B的rank为2,C的rank为3,
在beforeRouteLeave中
这个貌似能解决问题,但是!!!
问题1: 这个返回动画就是不对...(图片在浏览器可能看不出啥问题,在真机很明显)因为这个框架是前端给的动画我也不会弄...如果能解决跳转动画问题,我觉得这个方案基本可以符合要求..如果有大佬可以解决,方便的话指导下小弟.而且能解决这个动画问题后面也不用看了...
问题二:有的时候会出现缓存了上一次的bug(也不知道咋回事...出现的还挺频繁..).
在这里就是我自己总结的一个方案..虽然能完美解决这些问题不过对开发不友好,维护成本太高..不建议使用(如果实在没办法的话)
首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)
先说下高度的滑动吧这个滑动的高度也是需要保存的.界面中沃使用cube-ui的scroll组件
给data增加一个scrollHeight属性缓存界面高度.还有需要缓存的数据model
当界面滑动停止调用scrollend方法对scrollHeight进行赋值
每次进入界面即在created 函数中取出缓存的高度,如果有高度那么让它自动滑动.并重新给scrollHeight进行赋值.
这边是我封装的一个js..实现是这样的
这样就可以保证滑动的缓存(data与高度类似).
这是data的js
当界面进行跳转对组件的rank进行判断如下:
而在进入的时候
④ vue页面缓存，keep-alive第一次无效的解决方法
方法二：使用 include + beforeRouteLeave + vuex 与方法一相似，不同的地方在于，将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存；跟方法一相比，不需要每次再重新初始化数据，但是需要在vuex中保存数据；
1、在创建router实例的时候加上scrollBehavior方法
2、将需要缓存的组件加在include属性里
3、在store里加入需要缓存的的组件的变量名，和相应的方法；
4、在beforeRouteLeave钩子函数里控制需要缓存的组件
⑤ vue项目部署后清页面缓存哪怕页面不动
系统bug。汪闭vue项目大多数是系统bug导致的。解决方案如下：
1首先修改根目录index.html在head里面添加下面代困旁裂码
2最后配置nginx不缓存htmlvue默认配置，打包后css和js的名字添加哈希值。