1.Android H5 缓存处理
https://blog.51cto.com/u_12218/11370903
2.但是vue项目打包发布之后,在测试服务器显示类似于Loading CSS chunk-5f3f0dd6.aa1bfa6f.css failed这样的错误。https://blog.csdn.net/Yu_luoluo/article/details/122170576
// loading chunk 出错处理
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g
const isChunkLoadFailed = error.message.match(pattern)
const targetPath = router.history.pending.fullPath
if (isChunkLoadFailed) {
router.replace(targetPath)
}
})
https://blog.csdn.net/weixin_67140738/article/details/133797695
4.### 前端实现
由于项目里面用到了vue-router,vue-router的错误处理函数
当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在onError方法中我们实现如下代码:
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});
</pre>
当捕获到Loading chunk {n} failed
的错误时我们重新渲染目标页面,这种实现明显更简单和友好。
后续如果发现了导致Loading chunk {n} failed
的本质原因会再更新本文,欢迎关注!
5.Vue 项目每次发版后要清理浏览器缓存问题
https://blog.csdn.net/dhp1994/article/details/134094454
6.nginx部署
server {
listen 10082;
location / {
root html;
try_files $uri $uri/ /index.html;
}
}
7. vue 加载优化
https://blog.51cto.com/u_14691/9831345
8.设置缓存策略中页面一定要对页面( inedx.html )设置no cache no store,避免依然指向旧的已被删除的资源,只有Get方式获取的资源才可以设置缓存策略。
https://blog.csdn.net/weixin_54079992/article/details/123885157
9 项目发版,导致页面加载js、css文件失败,页面报错问题
// router.js
router.onError((error) => {
// 防止前端发版后,js加载失败,造成页面崩溃,
const errorStr = JSON.stringify(error)
const isChunkLoadFailed = errorStr.includes('Loading chunk') || errorStr.includes('CSS_CHUNK_LOAD_FAILED');
const targetPath = router.history.pending.fullPath;
// 防止死循环
if (isChunkLoadFailed) {
if (location.href.indexOf("#reloaded") == -1) {
location.href = location.href + "#reloaded";
location.reload();
}
}
});