首先说说我的问题
我在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的语法，也这样改就可以了，
希望对大家有帮助！！！
网友评论