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>

原文地址：https://blog.csdn.net/xuelong5201314/article/details/142587263

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！