问题

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>