vue CSS_CHUNK_LOAD_FAILED

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();
    }
  }
});