当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

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

2019年05月30日  | 移动技术网IT编程  | 我要评论

生生长流,油茶价格,我爱波子

前言: 项目使用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.js的chunkhash打包后的js文件hash值会有变更,因为每次更新代码到线上都会删除旧的dist目录,将最新的dist目录copy上传提供后台更新. 在更新代码的这个过程用户停留在页面上,当用户在更新完后重新操作就会导致报错

问题1解决方法:捕获路由报错. (思路来源:)

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目前还在与后台商量如何解决,解决后会更新解决方法分享.有同学遇到同样的问题可以一起讨论或提出更好的解决方案参考学习.★★★

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网