最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
时间:2018-11-15 编辑:猪哥 来源:一聚教程网
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName
实现按需加载.
BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分)
问题1.导航点击无法正常跳转,console打印:Error:Loading chunk {n} failed.
报错截图
问题2.页面全白,console打印:Uncaught SyntaxError:Unexpected token <
报错截图:
经过一番折腾,初步定位问题1在经过build/webpack.prod.conf.js
的chunkhash
打包后的JS文件hash值会有变更,因为每次更新代码到线上都会删除旧的dist目录,将最新的dist目录copy上传提供后台更新. 在更新代码的这个过程用户停留在页面上,当用户在更新完后重新操作就会导致报错
问题1解决方法:捕获路由报错. (思路来源:https://www.jb51.net/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 Header
content-type异常,正常情况返回content-type: application/javascript
. 但是有一个js响应的内容为HTML, js无法识别<符号导致抛出报错
问题2目前还在与后台商量如何解决,解决后会更新解决方法分享.有同学遇到同样的问题可以一起讨论或提出更好的解决方案参考学习.★★★
-
上一个: vue实现自定义日期组件功能的实例代码
-
下一个: Vue常用的几个指令附完整案例
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28