vue 项目打包更新后，界面未刷新时js与css资源加载404，监听资源文件404后自动重新加载页面。
问题
vue 项目打包更新（生成环境）后，界面未刷新时js与css资源加载404，如图：
期望
希望可以监听到资源文件加载404时，刷新界面，解决打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出现 404 错误。
解决方法
使用方法下面方法来监听资源文件加载异常
window.addEventListener('error', this.fileLoadingError, true)
代码
app.vue
<script>
...
created() {
...
window.addEventListener('error', this.fileLoadingError, true)
...
},
beforeDestroy() {
window.removeEventListener('error', this.fileLoadingError) // 关闭刷新浏览器销毁监听
},
methods: {
fileLoadingError(event) {
// 判断是否存在，存在跳过 ， 不存在刷新
const RefreshAccessingResources = sessionStorage.getItem('fileLoadingError')
if (RefreshAccessingResources) { // 这里是为了防止一直刷新，所有只要存在了就不能刷新了
return
}
const arr = event.target.src.src.split('.')
const str = arr[arr.length - 1]
if (event.target.tagName === 'SCRIPT' && (str === 'js' || str === 'css')) { // 判断是脚本并且文件后缀是js与css
sessionStorage.setItem('fileLoadingError', 1) // 刷新获取最先资源
window.location.reload()
}
},
}
</script>