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脚本代码跑起来。
Jan 09 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
react中hook介绍以及使用教程
Dec 11 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程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
Python2包含中文报错的解决方法
2018/07/09 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python reversed函数及使用方法解析
2020/03/17 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
自我鉴定书范文
2013/10/02 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
干部行政关系介绍信
2014/01/17 职场文书
教师党性分析材料
2014/02/04 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
质量月活动总结
2014/08/26 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis