脚本宝典收集整理的这篇文章主要介绍了vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token <" 报错,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言: 项目使用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://segmentfault.com/a/11... )
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-cli默认build后的文件名格式为js/[name].[chunkhash].js
,每次npm run build
后有改动的文件hash值都会改变,上传后Nginx无法找到最新上传的文件,所以返回了默认index.html
里的内容,我们的文件后缀名是.js
自然无法识别<html>
这种标签符号,导致console抛出Uncaught SyntaxError:Unexpected token <
,我尝试修改build/webpack.prod.conf.js
output输出文件名格式,目前问题已得到解决
以上是脚本宝典为你收集整理的vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token <" 报错全部内容,希望文章能够帮你解决vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token <" 报错所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。