Vue进阶(幺捌玖):项目build报错的解决办法(ERROR in static/js/**.js from UglifyJs

网友投稿 1643 2022-05-30

一、前言

Vue项目编译过程中,出现如下错误信息:

ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs Unexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11] Build failed with errors.

问题分析

我们知道,由于 UglifyJs 只支持 ES5 而 element-ui 可能引入了一部分 ES6 的写法,所以导致 webpack 打包失败。所以出现此类问题的一般是由于 ES6 语法转换为 ES5 失败导致。

在vue配置中,由于各插件版本兼容性差异可能会引发此问题的产生。UglifyJs是一款可以解析、混淆、压缩JS的工具,此处的UglifyJs是配置在脚手架/webpack中,运行在node环境中的小插件。

关于UglifyJs:

uglify-js@3具有简化的API和CLI,该API和CLI不能向后兼容uglify-js@2。

UglifyJS 2.x 版本的文档可以在这里找到。

Uglify-js 仅支持javaScriptECMAScript 5)。

要缩小ECMAScript 2015或更高版本,请使用Babel之类的工具进行转义。

二、问题解决

在深入查找问题所在后,决定用 bable 来解析 element-ui, 要完成此操作只需要修改前端文件夹下的build/webpack.base.conf.js 文件即可,修改如下:

修改前

module: { rules: [ ... { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] },

修改后:

module: { rules: [ ... { test: /\.js$/, // 对js文件使用babel-loader转码,该插件是用来解析es6等代码 loader: 'babel-loader',//注意elementUI的源码使用ES6需要解析 include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')] }, ...

以上配置将 element-ui 加入需要 babel 解析的包中。

Vue进阶(幺捌玖):项目build报错的解决办法(ERROR in static/js/**.js from UglifyJs

之后再次执行 npm run build,成功。

拓展阅读

《Vue进阶(五十一): vue-cli脚手架build目录中的webpack.base.conf.js配置文件》

《Vue进阶(五十二):vue-cli脚手架build目录中的webpack.dev.conf.js配置文件》

《Vue进阶(五十三):vue-cli脚手架build目录中的webpack.prod.conf.js配置文件》

《Vue进阶(五十四):vue-cli脚手架build目录中的dev-server.js配置文件》

《Vue进阶(五十五):vue-cli脚手架build目录中的build.js配置文件》

《Vue进阶(五十六):vue-cli脚手架build目录中的karma.conf.js配置文件》

《Vue进阶(幺零八):npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx. 解决分析》

JavaScript Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:数据安全是指什么?有什么意义?
下一篇:技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?
相关文章