前言

• 记录下这个巨坑（实质上是正则表达式错误，如果已知问题，想看如何解决直接跳到最后）

问题描述

首先贴上错误信息

SyntaxError: invalid regexp group
router error:  ChunkLoadError: "Loading chunk chunk-5f403866 failed.
(missing: http://192.168.80.75:8680/static/js/chunk-5f403866.6c0bcd4c.js)"

router error是vue路由捕获到的错误，代码如下

原因分析

看错误信息，貌似是某一个js文件加载失败了（提示missing）

而最近项目又恰巧的遇到vue打包发布后，出现js文件缓存的问题

所以潜意识的就认为这是由浏览器缓存导致的bug(浏览器缓存了上一个版本的js文件，新版本发布上去后，再次访问报错这种)

解决方案

自以为的缓存问题

接着开始在网上疯狂的找vue发布版如何解决缓存问题，

在index.html中加入以下内容，emmm 没卵用

  <!-- 禁止缓存(作用不大) -->
  <meta http-equiv="Expires" content="0"/> 
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate"/>
  <meta http-equiv="Cache" content="no-cache"/>
  <!--  -->

然后又找了nginx如何配置禁止缓存，没用

试了下在router.onError事件里面处理，页面直接无限重新加载

router.onError((error) => {
  // 防IE缓存导致找不到js文件
  const pattern = /Loading chunk \d+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
    // 用路由的replace方法，并没有相当于F5刷新页面，失败的js文件并没有从新请求，会导致一直尝试replace页面导致死循环，而用 location.reload 方法，相当于触发F5刷新页面，虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，从而曲线救国解决该问题
    location.reload()
    // const targetPath = $router.history.pending.fullPath;
    // $router.replace(targetPath);
  }

正则表达式不支持（真实原因）

最后，搜了下SyntaxError: invalid regexp group这个错误，链接

我在一个vue文件里使用到了正则的前置断言表达式，而IE和火狐不支持正则的前置断言表达式（这个错误还会导致报模块加载失败的错误），谷歌浏览器是支持的，而我平时开发又一直用的谷歌浏览器调试…

修改代码，重新构建一下，问题解决

心态崩了，咋就没去搜第一个错误提示呢，前端开发还是得多用几个浏览器测。

后语

• 遇到这个问题也累积一个经验，SyntaxError表示语法错误，这个时候需要检查代码是否写错了
• 希望这篇文章能帮到遇到此类问题的程序猿们