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提升性能最佳实践小结
Dec 06 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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 什么是PEAR?(第二篇)
2009/03/19 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python日期时间对象转换为字符串的实例
2018/06/22 Python
django框架使用方法详解
2019/07/18 Python
python 实现兔子生兔子示例
2019/11/21 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
简单了解Python write writelines区别
2020/02/27 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
scrapy-splash简单使用详解
2021/02/21 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
自考生毕业自我鉴定
2013/10/10 职场文书
企业法人授权委托书
2014/04/03 职场文书
抗洪救灾标语
2014/10/08 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
如何用JavaScipt测网速
2021/05/09 Javascript
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS