原文链接:https://dsx2016.com/?p=980

微信公众号:大师兄2016

直接上图

vue 本地调试没有问题

打包上线后,线上的某个页面打开空白,报以下错误

Uncaught SyntaxError: Unexpected token <

 

排查定位

代码检查

代码检查,一般Unexpected token <的错误,字面上的意识就是代码中可能有多余的<的符号,造成js阻塞

其次可能是合并冲突,导致未解决冲突的代码被提交了 <<<之类的

语法检查

本地没有问题,打包到线上有问题,可能是webpack编译过程中ES6某些语法没有转为ES5

也可以引起类似的报错,如箭头函数等

let age = 0
setInterval(() => {
    age++;
}, 1000);

 

文档类型

前端的表现不一定是前端的问题,也可能是服务端的问题,如设置跨域,nginx404配置等

点击控制台错误的代码提示,查看network对应的文件加载状态

可以看到报错的文件内容,这里注意了,一旦js打开为doctype html,那么很大概率是nginx把js文件当做html文件响应的,于是解析错误

这个时候记得查看该文档的响应信息

正常情况返回content-type: application/javascript

错误的情况下,js文档的响应信息如图,变成了text/html类型

Tips

这种js被nginx返回html解析的情况是在直接返回以下形式路由的时候出现的

使用path /:id 传参的形式的路由,直接访问对应的url才会有

先进入首页再跳转/user不会有,不使用/:id的路由形式也不会有

routes: [
    { path: '/user/:id', component: User }
]

 

具体原因未知,无奈只能转回url query取参数,而不是/user/id这里url路径上去参数了