解决VUE项目更新后需要客户手动刷新浏览器和发版之后页面出现白屏的问题

夕阳_醉了

已于 2024-08-05 15:33:23 修改

阅读量942

点赞数 7

文章标签： vue.js 前端 javascript

于 2024-01-25 14:25:17 首次发布

本文链接：https://blog.csdn.net/w807139809/article/details/135843623

版权

文章介绍了在Vue应用中，当路由页面的JS文件404时如何使用`router.onError`方法进行错误处理，包括使用正则匹配和ElementUI组件库显示警告，以及刷新页面的实现。

摘要由CSDN通过智能技术生成

跳转路由页面加载该页面js文件404时，触发router.onError
报错信息
解决办法：
在main.js中加入路由的onerr方法

// main.js
router.onError((error) => {
  const pattern = /Loading .*failed/g  // vue2的正则
 //  const pattern = /Failed to fetch dynamically imported module*/g   // vue3的正则
  const isChunkLoadFailed = pattern.test(error);
  if (isChunkLoadFailed) {
  // 这里是用elementUI的组件库弹个提示  要改成自己项目使用的组件库
    ElementUI.Message({
      message: '系统已升级，正在刷新本地存储，请稍候...',
      type: 'warning',
      duration: 1500,
      offset: 60
    })
    location.reload()
  }
})