Vue項(xiàng)目報錯：Uncaught SyntaxError: Unexpected token <
遇到問題：
今天做一個 VUE 的項(xiàng)目，在引入第三方依賴的 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項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問題
- VUE3刷新頁面報錯問題解決:Uncaught?SyntaxError:Unexpected?token?'＜'
- Vue項(xiàng)目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法
- 解決VUE項(xiàng)目在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 表格分頁限制最大頁碼數(shù)的操作代碼
這篇文章主要介紹了vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文2018-01-01
解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等）
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等），解決方法是使用this.$forceUpdate()強(qiáng)制刷新，文章給大家分享了代碼案例，需要的朋友參考下吧2018-07-07
Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
本文主要介紹了vue中el-message的封裝使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
滑塊驗(yàn)證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗(yàn)證，具有一定的參考價值，感興趣的可以了解一下2022-01-01
Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
Vue.js 實(shí)現(xiàn)微信公眾號菜單編輯器功能(一)
最近vue.js 非常火熱，小編也趁機(jī)學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實(shí)現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
Vue通過echarts實(shí)現(xiàn)數(shù)據(jù)圖表化顯示
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2021-11-11