vue项目使用第三方插件，打包时UglifyJs出错

首先说说我的问题

我在vue项目（vue-cli+webpack构建的）里使用了vue的图片预览插件vue-picture-preview，dev的时候没问题，打包的时候就报错：ERROR in static/js/vendor.9ccaa23ecd84cd1550b5.js from UglifyJs

Unexpected token: punc (() [./node_modules/_vue-picture-preview@0.0.1@vue-picture-preview/index.js:7,0][static/js/vendor.9ccaa23ecd84cd1550b5.js:124,16]

首先，我们来看下报错信息：

报错信息说有个错误在打包后的文件vendor.6511c23cf24d51177823.js中

错误原因：Unexpected token: punc (()，即不能识别标点‘（’,

源文件出错的地方：/node_modules/_vue-picture-preview@0.0.1@vue-picture-preview/index.js:7,0，第2行，0列

打包文件出错的地方：static/js/vendor.9ccaa23ecd84cd1550b5.js:124,16，第124行，16列

把两个文件打开，找到报错的位置，发现代码一模一样

源代码：vue-picture-preview@0.0.1@vue-picture-preview/index.js

源代码

打包后的： vendor.9ccaa23ecd84cd1550b5.js

打包后的代码

上面的代码是es6的语法，由于现在还有浏览器不支持es6的语法，所以在打包的过程中要把es6转换成es5,在打包时使用了UglifyJs压缩JS，但是UglifyJs无法解析ES6，才出现了上述问题，

我用的是webpack打包的，解决问题的办法如下：

修改webpack的配置文件：webpack.base.conf.js

修改前：

修改前

修改后：

修改后

我用红色框框标出来的地方和报错的源文件路径保持一致，别想当然的写成：‘node_modules/vue_pictrue_preview/index.js’，我就犯了这样的错误，把自己坑的不要不要的，这样修改后打包就不会出错了。

当你引入其他的第三方的库的时候，如果引入的库有es6的语法，也这样改就可以了，

希望对大家有帮助！！！