vue js报Uncaught SyntaxError: Unexpected token 错误

原文链接: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

路径上去参数了