2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token <" 报错

vue.jsvue-clijavascript作者:猿2048志愿者

前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载.
图片描述

BUG器打好基下是求的响的可域适的一的近重交的描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调现了喜知进问题2区分)

问题1.导航点击无法正常跳转,刷新后恢复正常. console打印:Error:Loading chunk {n} failed.

报错截图图片描述

问题2.页面全白,并且刷新仍然无效. console打印:Uncaught SyntaxError:Unexpected token <

报错截图: 图片描述

经过一番折腾,初步定位问题1在经过build/webpack.prod.conf.jschunkhash打包后的JS文件hash值会有变更,因为每次更新代码到线上都会删除旧的dist目录,将最新的dist目录copy上传提供后台更新. 在更新代码的这个过程用户停留在页面上,当用户在更新完后重新操作就会导致报错

图片描述

问题1解决方法:捕获路由报错. (思路来源:https://segmentfault.com/a/11... )

routers.onError((err) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = err.message.match(pattern);
  if (isChunkLoadFailed) {
    let chunkBool = sessionStorage.getItem('chunkError');
    let nowTimes = Date.now();
    if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳转报错,href手动跳转
      sessionStorage.setItem('chunkError', 'reload');
      const targetPath = routers.history.pending.fullPath;
      window.location.href = window.location.origin + targetPath;
    }else if(chunkBool === 'reload'){ //手动跳转后依然报错,强制刷新
      sessionStorage.setItem('chunkError', Date.now());
      window.location.reload(true);
    }
  }
})

问题2在Network查看js文件加载的时候发现某个js文件Response Headercontent-type异常,正常情况返回content-type: application/javascript. 但是有一个js响应的内容为HTML, js无法识别<符号导致抛出报错
图片描述
图片描述

问题2解决方法: 经过问题排查发现,vue-cli默认build后的文件名格式为js/[name].[chunkhash].js,每次npm run build后有改动的文件hash值都会改变,上传后Nginx无法找到最新上传的文件,所以返回了默认index.html里的内容,我们的文件后缀名是.js自然无法识别<html>这种标签符号,导致console抛出Uncaught SyntaxError:Unexpected token <,我尝试修改build/webpack.prod.conf.jsoutput输出文件名格式,目前问题已得到解决
图片描述

本文来源于网络:查看 >
« 上一篇:抓包中华万年历得到天气接口
» 下一篇:vue + webpack +chrome 调试
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文
×添加代码片段