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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
js实现蒙版效果
Jan 11 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
JS实现小米轮播图
Sep 21 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/05/04 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
校园绿化美化方案
2014/06/08 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
会议简讯范文
2015/07/20 职场文书
公司行政管理制度范本
2015/08/05 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
使用MybatisPlus打印sql语句
2022/04/22 SQL Server