Vue -- 打包报错 Uncaught SyntaxError: Unexpected token <

问题场景：页面打开不操作，前端项目代码更新重新部署后，页面不刷新，操作页面(点击打开弹窗、切换菜单等)，页面没有反应，控制台报错 Uncaught SyntaxError: Unexpected token <。这个问题偶现，只有在项目重新部署后会出现，页面刷新后就恢复正常。

在前端项目未更新之前打开的页面，在前端项目更新后，hash 码更新导致 js 请求路径改变，而页面依然以之前的路径请求js资源，必然会请求不到。如果资源请求不到一般会报404问题，但是服务器配置了404页面，对于请求不到的资源会返回一个404页面，在 script 标签里解析 html 文件。

const head = document.getElementsByTagName('head')[0]
head.addEventListener('DOMNodeInserted', e => {
  // 获取标签名
  const type = e.target.tagName
  // 获取资源路径
  const url = e.target.src
  if (type === 'SCRIPT' && url) { 
    // 创建请求，如果需要低版本浏览器兼容的，请注意
    let xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.onload = () => {
      const text = xhr.responseText
      if (text.indexOf('<') === 0) {
        this.$modal.info({
          title: '检测到有新的版本发布，需要刷新页面以访问最新内容',
          width: 350,
          okText: '确定',
          onOk() {
            location.reload()
          }
        })
      }
    }
    xhr.send()
  })

对于报错的 js 文件，我们会在 xhr.responseText 获取到一个以尖括号开头的 html，这时候我们就可以知道当前资源路径失效，就可以在此时做一些处理。

ps：如果是一打开页面就报错 Unexpected token <，那应该是路径配置问题，检查一下 webpack 的 publicPath 配置，这种场景跟上面提到的不是同一个问题。

原文链接