Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <

更新時(shí)間：2018年11月10日 10:30:06 作者：Miss_Ye

這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <，在引入第三方依賴的 JS 文件時(shí)，遇到的一個(gè)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

遇到問(wèn)題：

今天做一個(gè) VUE 的項(xiàng)目，在引入第三方依賴的 JS 文件時(shí)，遇到了一個(gè)問(wèn)題：

控制臺(tái)的提示：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>，這樣就不報(bào)錯(cuò)了！

總結(jié)：

1、assets文件夾與static文件夾的區(qū)別

區(qū)別一：assets文件是src下的，所以最后運(yùn)行時(shí)需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了

區(qū)別二：assets中的文件在vue中的template/style下用../這種相對(duì)路徑的形式進(jìn)行引用，在script下必須用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../這種相對(duì)路徑的方式引入，

2、

（1）assets用來(lái)放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。

（2）static用來(lái)放沒(méi)有npm包的第三方插件，字體文件。

（3）assets與components同級(jí) components下的.vue引用靜態(tài)文件時(shí)，相對(duì)路徑為 ../assets/wapFront

3、vue如何引入其它靜態(tài)文件：

（1）src目錄下的資源只能import或require。

（2）想靜態(tài)引入的話，建立一個(gè)與src同級(jí)的目錄例如static，然后把靜態(tài)資源放入該文件夾下，html的引入路徑如下：./static/...（注：試過(guò)一定要放在static文件夾下，否則報(bào)錯(cuò)）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解如何在vue項(xiàng)目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項(xiàng)目中引入elementUI組件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue插件之滑動(dòng)驗(yàn)證碼
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動(dòng)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue2單元測(cè)試環(huán)境搭建
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。
2018-05-05
vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
今天小編就為大家分享一篇vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
uni-app?vue3接口請(qǐng)求封裝示例代碼
uni-app是一個(gè)使用Vue.js開(kāi)發(fā)的多端開(kāi)發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請(qǐng)求封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2023-05-05
vue3?hook自動(dòng)導(dǎo)入原理解析
這篇文章主要介紹了vue3?hook自動(dòng)導(dǎo)入的原理,介紹了API的自動(dòng)導(dǎo)入及組件的自動(dòng)導(dǎo)入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-09-09
vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue2 Watch監(jiān)聽(tīng)操作方法
這篇文章主要介紹了Vue2 Watch監(jiān)聽(tīng),通過(guò)watch監(jiān)聽(tīng)器,我們可以實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時(shí)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下
2023-12-12