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的语法,也这样改就可以了,

希望对大家有帮助!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,322评论 4 31
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,336评论 0 5
  • 去年备受舆论关注的“罗尔事件”也入选慈善十大热点事件。 去年11月27日,《罗一笑,你给我站住》等文章引发朋友圈的...
    不是养蚕人阅读 288评论 0 0
  • 1. 首先导入SQL处理库FMDB,使用FMDB来处理 2. 在导入需要处理的文件,如file.db 3. 实例代码
    笠天丐冥阅读 2,755评论 0 3
  • 大风起呀 云飞扬 威加海内呀 归故乡 国有猛士啊 守四方 大风起呀 云飞扬 威震海外呀 走四方 国有猛士啊 征四方
    丁聪阅读 163评论 0 0