vue项目 报Uncaught SyntaxError: Unexpected token < 错误,一般是本来script src里应该是.js脚本资源,但是服务器却返回了.html 资源,出现这种情况很可能是新项目构建完后,用户还是访问老的缓存页面,老的缓存页面里的script src 引用的资源是服务器返回的404 html文件页面或者是被运维设置( try_files $uri $uri/ /index.html;
)成跳转首页的html 文件(因为老的缓存页面里的script src 资源在你构建后 是会被删除的);如下图 就是这样的情况:
这里说是当js引用的文件是项目路径下的文件夹时,会报这个错误。当时出现这个问题 是因为求助我的人他用了CDN 导致 (缓存) 访问了不存在的js,然后这个404错误又重新指向了一个提示的自定义页面,由于脚本里面不允许出现标签因为标签带了<>符号,所以,就会抛出这个异常 从而报错。
今天 发现一篇文章---Nginx解决VUE的history模式下刷新404报错介绍 说nginx配置与代码静态资源打包方式不匹配 也会导致这样的错误
另外提供下 打开浏览器 再部署后(没有刷新浏览器),点击路由 报错的信息
其实就是报404 资源找不到,这个我采用监听错误的方式(针对404),提示用户是否刷新浏览器
//放在 头部
function getSrcOrHref(msg) {
if (msg.target){
var res=msg.target.src || msg.target.href || msg.srcElement.href || msg.srcElement.src;
if (res){
return res
}else {
return '未知地址'
}
}else {
return '无法找到目标'
}
}
function getHost(url) {
var getHostReg=/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
return getHostReg.exec(url)[0];
}
window.addEventListener('error', (msg, url, row, col, error) => {
// alert('监测到错误'+msg)
var targetSrc = getSrcOrHref(msg);
if (msg.target && (msg.target.nodeName !=='IMG') && !msg.message && getHost(targetSrc)===window.location.host) {
if (confirm('检测到平台程序有更新,是否需要刷新浏览器?')) {
console.error( '可能您的浏览器还在使用过期的缓存文件,是否需要帮您自动刷新浏览器?'+'原因为找不到'+targetSrc);
window.location.reload()
}
}
//www.greatytc.com/u/e0c3321672f5
console.warn(msg.target ? (msg.target.outerHTML || msg.srcElement.outerHTML):'无法找到目标地址');
console.warn(
msg, url, row, col, error
);
return true;
}, true);
// 必须捕获阶段执行
// window.onerror=function (msg, url, row, col, error) {
// alert('在冒泡阶段监测到错误'+msg)
// }
20190517更新
检索资料无意发现 <scrpit src='./XXX/XXX/jquery.toggle.button.html' type='text/javascripnt'/>
这种在script中src引入html文件也会这样报错。 Uncaught SyntaxError: Unexpected token <反思