vue項目出現Uncaught SyntaxError: Unexpected token 解決方案

最近在作vue項目時，須要引入一個第三方的js文件，在index.html中經過如下方式引入JS文件編譯後，就報了這個問題。

 

根據廣大的網頁的思路，致使這一現象的緣由可能有如下幾種：

緣由一.引用文件的位置不正確

js文件放在static文件夾下和放在assets文件夾下的引用方式是不同的。簡而言之：

   1.assets用來放置樣式、靜態圖片，只要src下面的組件中用到的資源就放在assets中。

   2.static用來放沒有npm包的第三方插件，字體文件。

   3.assets與components同級  components下的.vue引用靜態文件時，相對路徑爲 ../assets/xxx/......

   說明：若是js文件中包含es6語法的話，就不能夠放在static文件夾下，由於static文件夾默認是不會被打包和編譯的，因此引用的時候會拋異常。

不一樣之處能夠查看這篇博客：https://www.cnblogs.com/huangqiao/p/7798887.html

解決方法：

將src下的文件放到static下面去，在indec.html中的引用路徑採用相對路徑的表現形式，「./static/xxx/xxxxx.js」

緣由二：配置信息不正確

若是你的js文件中包含es6語法，但沒有配置採用babel-loader來解析和轉化爲es5語法的話，也會報這個錯誤。

解決方法：

須要在webpack.config.js裏配置loader，vue-cli是不會幫忙配置的。

 

而後從新編譯項目，就能夠解決，固然這個也沒有解決個人問題。

緣由三：script的引入類型不對

解決辦法：將type="text/javascript"改成type="text/babel"

我嘗試了，不會再報以上錯誤，可是我引入的JS文件中的內容卻沒有編譯成功，裏面的方法依然沒法使用。

緣由四.瀏覽器緩存問題

有時候多是因爲瀏覽器有緩存，一直沒法加載最新的內容，因此當你改了之後，依然沒有生效。這種狀況下，能夠從新清除瀏覽器緩存，而後從新運行項目，就能夠解決。

緣由五.配置問題

1.在配置文件webpack.dev.config.js中，如存在如下內容，直接註釋掉，這兩部分在文件中不是連在一塊兒的，你們注意觀察。　

const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])

2.而後，將這個變量的值改成，而後從新運行，就對啦。

contentBase：false

若是以上方法都不能解決的話，那我也無能爲力了，這是我今天試過的全部方法，祝你們開發順利。