快捷導(dǎo)航

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

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

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

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

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

簡(jiǎn)而言之：

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/xxx/......

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

不同之處可以查看這篇：http://m.fzitv.net/javascript/320319g1q.htm

解決方法：

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

原因二：配置信息不正確

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

解決方法：

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

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

原因三：script的引入類型不對(duì)

解決辦法：

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

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

原因四：瀏覽器緩存問(wèn)題

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

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

原因五：配置問(wèn)題

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)行，就對(duì)啦。

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