vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決

更新時(shí)間：2024年04月27日 14:59:28 作者：心若向陽無謂悲傷

這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

原因一：引用文件的位置不正確

js文件放在static文件夾下和放在assets文件夾下的引用方式是不一樣的。

簡而言之：

1.assets用來放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。
2.static用來放沒有npm包的第三方插件，字體文件。
3.assets與components同級(jí) components下的.vue引用靜態(tài)文件時(shí)，相對路徑為 ../assets/xxx/......

說明：如果js文件中包含es6語法的話，就不可以放在static文件夾下，因?yàn)閟tatic文件夾默認(rèn)是不會(huì)被打包和編譯的，所以引用的時(shí)候會(huì)拋異常。

不同之處可以查看這篇：http://chabaoo.cn/javascript/320319g1q.htm

解決方法：

將src下的文件放到static下面去，在indec.html中的引用路徑采用相對路徑的表現(xiàn)形式，“./static/xxx/xxxxx.js”

原因二：配置信息不正確

如果你的js文件中包含es6語法，但沒有配置采用babel-loader來解析和轉(zhuǎn)化為es5語法的話，也會(huì)報(bào)這個(gè)錯(cuò)誤。

解決方法：

需要在webpack.config.js里配置loader，vue-cli是不會(huì)幫忙配置的。

然后重新編譯項(xiàng)目，就可以解決，當(dāng)然這個(gè)也沒有解決我的問題。

原因三：script的引入類型不對

解決辦法：

將type="text/javascript"改為type="text/babel"

我嘗試了，不會(huì)再報(bào)以上錯(cuò)誤，但是我引入的JS文件中的內(nèi)容卻沒有編譯成功，里面的方法依然無法使用。

原因四：瀏覽器緩存問題

有時(shí)候可能是由于瀏覽器有緩存，一直無法加載最新的內(nèi)容，所以當(dāng)你改了以后，依然沒有生效。

這種情況下，可以重新清除瀏覽器緩存，然后重新運(yùn)行項(xiàng)目，就可以解決。

原因五：配置問題

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.然后，將這個(gè)變量的值改為，然后重新運(yùn)行，就對啦。

如果以上方法都不能解決的話，那我也無能為力了，這是我今天試過的所有方法，祝大家開發(fā)順利。