起因是打包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里面。当然其他人的错和我这个应该不会都一样。但是定位到问题,就好解决了。这个问题真是坑了我一一晚上
好惨。。。