关于vite项目中可能存在的前端资源加载报错

直接上事故现场：

关键字：LINK load fail,preloadError,vite,preload

vite官方文档

构建生产版本 | Vite 官方中文文档

事故产生原因分析

这个报错大量发生在项目重新部署后，按照官方的说法是缓存问题

为了解决缓存问题，前端做了什么？

产物名称加hash

防止重新部署后，因为浏览器缓存了部分之前版本的文件，用户端混淆着新旧版本的代码，导致项目出错，当然这个优化这个vite已经默认帮我们做了

产物增量部署

防止重新部署后，用户加载的html还在历史版本，假如部署时删掉历史版本的产物，在历史版本的用户可能会因加载不到旧版本的资源文件报错

<meta http-equiv="cache-control" />

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />

在入口HTML文件中，可以配置这个meta标签，来告知浏览器不要缓存HTML文件

划重点

然而，通常来说服务端返回的response header中的缓存策略可能优先级更高！所以......最好在Nginx中配置响应头，而不是在HTML中配置

ps：关于这块内容，可以自行百度浏览器中的强缓存和协商缓存学习，（多年背的面试题终于派上用场了）

域名加版本号/时间戳后缀

<web-view
  :src="`https://www.baidu.com?__v=${versionCode}&__t=${dayjs().unix()}`"
/>

（别问，问就是write once、debug anywhere 的uniapp开发）

and more

可能还有疏漏的地方......

做的还不够吗？

c端应用的运行环境确实复杂，可能也有笔者疏漏的地方，总之还是按照vite的文档加上

window.addEventListener('vite:preloadError', (event) => {
  window.location.reload() // 例如，刷新页面
})

最后别忘了

window.removeEventListener('vite:preloadError', callBack)