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 获取字符串字节数的多种方法
Jun 02 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
js实现简单抽奖功能
Nov 24 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
DC动漫人物排行
2020/03/03 欧美动漫
8个PHP程序员常用的功能汇总
2014/12/18 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js Calender控件使用详解
2015/01/05 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
实践Vim配置python开发环境
2018/07/02 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python实现ATM系统
2020/02/17 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
Java如何支持I18N?
2016/10/31 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
HR喜欢的自荐信格式
2013/10/08 职场文书
寄语十八大感言
2014/02/07 职场文书
外贸业务员求职信
2014/06/16 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
房产电话营销开场白
2015/05/29 职场文书
可怜妈妈观后感
2015/06/09 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python