Vue Script Static file Uncaught SyntaxError: Unexpected token
背景
Vue 專案 index.html 中的 script 標籤引用 static 目錄下的檔案時報錯
Uncaught SyntaxError: Unexpected token <
先貼一下程式碼：
<body>
<div id="app"></div>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/moment.min.js"></script> 
分析
額，其實如果不看上面那個報錯的話，還能直接發現一個很明顯的問題，就是我引用的 moment.min.js 路徑寫錯了。但是在實際的開發過程中，竟然沒有報 404 not found ， 於是就沒有注意到這個低階錯誤。
排錯
事後諸葛亮，我們還是來看一下，這個問題的排查過程。
點選控制檯報錯的詳情，進入 Source：
E …
看起來還是一個很頭疼的問題呢，看Source 沒用。點選 Network 看看吧：
咦… 怎麼沒有內容顯示出來。因為手賤，其實我已經將這些build 之後的檔案都發到伺服器上去了。我們看看訪問伺服器上頁面的 Network
震驚了竟然出現了 nginx 畫面之後，我懂了。因為伺服器上的靜態資源是通過nginx 來路由的，針對沒有路由到的檔案（因為我還沒有做專門的 error.html）就會顯示這個初始的 nginx welcome page 。於是我想到了肯定是因為路徑寫錯啦！
事後分析
那麼到底為什麼，因為路徑寫錯了，就顯示了
開啟 dist 資料夾中的 index.html 檔案：
這裡的html標籤不寫雙引號是 HTML5 的一個特性。如果是HTML5以前的版本，標準寫法是需要加雙引號的。不過還是加上吧，感覺這不是一個好的規範，忽略即可。
script 標籤將去請求 src=
script 標籤內。想一想下面兩個script 標籤：
而實際去請求 http://localhost:8080/static/js/moment.min.js 這個地址返回的是一段 html 程式碼，也就是
下面來模仿一下這個err, 你自己也可以試試：
再訪問一下這個頁面，你就會看到同樣的錯誤了。
最後
是個小問題，但是背後的原理一細想，還是有很多的，我們要知道為什麼錯了，以及要多一點尋找根本的耐心。
Happy Coding!