UglifyJs報Unexpected token punc «:», expected punc «,» 這類錯誤的解決辦法

   起因是打包vue的項目。然后報出了這個錯誤。關鍵他並沒有明確的說明是哪里報錯。只是提示了Unexpected token punc «:», expected punc «,» [static/js/app.28653113.js:4107,15]，只說是在這個文件里面。but，打包沒通過。這個文件根本就沒有啊。。有時候報錯是Unexpected token punc «:», expected punc «,» [./src/utils/request.js:8,11][static/js/app.28653113.js:4107,15]，這種明確提示了文件的還好排查。如果遇到上面的報錯。咋搞。經過我一晚上的努力。終於找出一個解決這類問題的通用方法。

   首先我們查看webpack的文檔。發現uglifyjs-webpack-plugin這個插件有個exclude配置。即配置的文件都會被壓縮插件排除，那么排除這個生成的js文件。我們不就能獲得打包的項目，然后就可以排查問題了噻，實際操作如下。

針對低版本的vue-cli，這個時候還能看得到配置。我們找到build目錄下的webpack.prod.conf.js文件，找到

minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          ecma: 8,
          compress: {
            warnings: false
          }
        }
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin()
    ]

如上這段代碼。。題外話。webpack4才有minimizer這個配置。低版本應該是沒有的。然后我們加上exclude選項，並且包含報錯的文件：

minimizer: [
      new UglifyJsPlugin({
       
        sourceMap: true,
        uglifyOptions: {
          ecma: 8,
          compress: {
            warnings: false
          }
        }
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin()
    ]

排除掉上面一直報錯的這個文件，其他參數可以忽略。主要是exclude，打包就能順利通過，結果如下

然后我們就可以去剛剛一直報錯的文件里面找為啥報錯。我這里報錯的是app.28653113.js的第4107行15列，也就是報錯提示上的【static/js/app.28653113.js:4107,15】分號后面的兩個數字，找到4107行，結果如下


因為安全問題。我把url改成了xxxx。但是錯誤是很明顯的。對象的value本來應該是個字符串。所以才會一直報這個錯。然后這個設置也很好找。就在config里面。當然其他人的錯和我這個應該不會都一樣。但是定位到問題，就好解決了。這個問題真是坑了我一一晚上
好慘。。。