原文鏈接: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路徑上去參數了