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


Posted in Javascript onNovember 06, 2018

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

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

BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分)

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

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

问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token <

报错截图: vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错

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

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

问题1解决方法:捕获路由报错. (思路来源:https://3water.com/article/147427.htm)

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无法识别<符号导致抛出报错

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
分析javascript原型及原型链
Mar 18 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
TypeScript 内置高级类型编程示例
Sep 23 Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
You might like
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
往来会计岗位职责
2013/12/19 职场文书
车贷收入证明范本
2014/01/09 职场文书
七一表彰活动方案
2014/01/18 职场文书
小学一年级学生评语
2014/04/22 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Python的property属性详细讲解
2022/04/11 Python