Vue項目報錯：Uncaught SyntaxError: Unexpected token <
遇到問題：
今天做一個 VUE 的項目，在引入第三方依賴的 JS 文件時，遇到了一個問題：
控制臺的提示：Uncaught SyntaxError: Unexpected token <
按照提示進(jìn)入文件，再看如下圖：
仔細(xì)看了看 index.html 文件,發(fā)現(xiàn)原本我的 JS 文件是放在 /src/utils 文件夾下的，但引入 /src 和 /static 的文件是有區(qū)別的。
解決方案：
解決辦法是將第三方依賴的 JS 文件放到 /static/utils 目錄下，引入路徑也改成：<script src="./static/utils/sockjs.js"></script>，這樣就不報錯了！
總結(jié)：
1、assets文件夾與static文件夾的區(qū)別
區(qū)別一：assets文件是src下的，所以最后運(yùn)行時需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了
區(qū)別二：assets中的文件在vue中的template/style下用../這種相對路徑的形式進(jìn)行引用，在script下必須用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入，
2、
（1）assets用來放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。
（2）static用來放沒有npm包的第三方插件，字體文件。
（3）assets與components同級 components下的.vue引用靜態(tài)文件時，相對路徑為 ../assets/wapFront
3、vue如何引入其它靜態(tài)文件：
（1）src目錄下的資源只能import或require。
（2）想靜態(tài)引入的話，建立一個與src同級的目錄例如static，然后把靜態(tài)資源放入該文件夾下，html的引入路徑如下：./static/...（注：試過一定要放在static文件夾下，否則報錯）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題
- VUE3刷新頁面報錯問題解決:Uncaught?SyntaxError:Unexpected?token?'＜'
- Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法
- 解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報錯
- vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯
- vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
相關(guān)文章
這篇文章主要介紹了詳解如何在vue項目中引入elementUI組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本篇文章給大家分享了vue2單元測試環(huán)境搭建的詳細(xì)步驟，對此有需要的朋友參考學(xué)習(xí)下。2018-05-05
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
今天小編就為大家分享一篇vue請求服務(wù)器數(shù)據(jù)后綁定不上的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
uni-app是一個使用Vue.js開發(fā)的多端開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請求封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue項目打包后proxyTable代理失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2023-05-05
這篇文章主要介紹了vue3?hook自動導(dǎo)入的原理,介紹了API的自動導(dǎo)入及組件的自動導(dǎo)入，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-12-12