① 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的名字添加哈希值。