vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
最近在做vue項目時，需要引入一個第三方的js文件，在index.html中通過以下方式引入JS文件編譯后，就報了這個問題。
根據(jù)廣大的網(wǎng)頁的思路，導(dǎo)致這一現(xiàn)象的原因可能有以下幾種：
原因一：引用文件的位置不正確
js文件放在static文件夾下和放在assets文件夾下的引用方式是不一樣的。
簡而言之：
- 1.assets用來放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。
- 2.static用來放沒有npm包的第三方插件，字體文件。
- 3.assets與components同級 components下的.vue引用靜態(tài)文件時，相對路徑為 ../assets/xxx/......
說明：如果js文件中包含es6語法的話，就不可以放在static文件夾下，因為static文件夾默認是不會被打包和編譯的，所以引用的時候會拋異常。
不同之處可以查看這篇：http://www.dbjr.com.cn/javascript/320319g1q.htm
解決方法：
將src下的文件放到static下面去，在indec.html中的引用路徑采用相對路徑的表現(xiàn)形式，“./static/xxx/xxxxx.js”
原因二：配置信息不正確
如果你的js文件中包含es6語法，但沒有配置采用babel-loader來解析和轉(zhuǎn)化為es5語法的話，也會報這個錯誤。
解決方法：
需要在webpack.config.js里配置loader，vue-cli是不會幫忙配置的。
然后重新編譯項目，就可以解決，當然這個也沒有解決我的問題。
原因三：script的引入類型不對
解決辦法：
將type="text/javascript"改為type="text/babel"
我嘗試了，不會再報以上錯誤，但是我引入的JS文件中的內(nèi)容卻沒有編譯成功，里面的方法依然無法使用。
原因四：瀏覽器緩存問題
有時候可能是由于瀏覽器有緩存，一直無法加載最新的內(nèi)容，所以當你改了以后，依然沒有生效。
這種情況下，可以重新清除瀏覽器緩存，然后重新運行項目，就可以解決。
原因五：配置問題
1.在配置文件webpack.dev.config.js中，如存在以下內(nèi)容，直接注釋掉，這兩部分在文件中不是連在一起的，大家注意觀察。
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])2.然后，將這個變量的值改為，然后重新運行，就對啦。
如果以上方法都不能解決的話，那我也無能為力了，這是我今天試過的所有方法，祝大家開發(fā)順利。
contentBase：false
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
vue業(yè)務(wù)實例之組件遞歸及其應(yīng)用
目中出現(xiàn)多級菜單時,需要多層for循環(huán)時,但是當菜單增加層級時,需要在頁面結(jié)構(gòu)中增加一層for循環(huán),這時我們可以使用組件遞歸的思想來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue業(yè)務(wù)實例之組件遞歸及其應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue3+three.js實現(xiàn)疫情可視化,本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要是來和大家一起討論一下Vue2與Vue3中響應(yīng)式的原理，文中的相關(guān)示例代碼簡潔易懂，對我們深入了解Vue有一定的幫助，需要的可以參考下2023-07-07
antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue.js+element 默認提示中英文實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中keep-alive的兩種應(yīng)用方式，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
在Vue中進行數(shù)據(jù)分頁的實現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個常見的需求,特別是當處理大量數(shù)據(jù)時,Vue作為一款流行的JavaScript框架,提供了強大的工具和生態(tài)系統(tǒng)來實現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進行數(shù)據(jù)分頁,以及如何設(shè)計一個通用的分頁組件,需要的朋友可以參考下2023-10-10
一次在vue中使用post進行excel表下載的實戰(zhàn)記錄
最近遇到了需求,覺著有必要給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于一次在vue中使用post進行excel表下載的實戰(zhàn)記錄,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07