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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript实现手风琴效果
Feb 18 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php 高效率写法 推荐
2010/02/21 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python多线程http压力测试脚本
2019/06/25 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
yy婚礼司仪主持词
2014/03/14 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
实习计划书范文
2015/01/16 职场文书
2015新学期家长寄语
2015/02/26 职场文书
商标侵权律师函
2015/05/27 职场文书