Vue进阶（幺捌柒）：vue项目build报错的解决办法（ERROR in static/js/***.js from UglifyJs）

文章目录

一、前言
二、问题分析
三、问题解决
四、拓展阅读

一、前言

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 仅支持JavaScript（ECMAScript 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 解析的包中。

之后再次执行 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. 解决分析》

Vue进阶（幺捌柒）：vue项目build报错的解决办法（ERROR in static/js/***.js from UglifyJs）相关推荐

vue 安装不上，报错，解决办法如下
vue 安装不上,报错,解决办法如下前言: vue安装问题就能难倒一拨人,还没等开发呢,就先退下了,看看解决办法,加速学习~~ 安装vue 安装命令 npm install -g @vue/cli ...
图解Myeclipse 导入Java Web项目报错的解决办法听语音
图解Myeclipse 导入Java Web项目报错的解决办法听语音 https://jingyan.baidu.com/article/046a7b3e953ef3f9c27fa93d.html
VUE安装sass-loader运行报错的解决办法
在搭建vue的过程中,在搭建使用sass需要安装sass-loader,很多人这里会遇到很多问题,但是如果第一次安装就报错的话一般是版本的问题导致的.另外也有可能就是版本和其他不匹配也会出现安装不对, ...
Android项目Build报错Unable to execute dx(65535问题解决方案)
2019独角兽企业重金招聘Python工程师标准>>> 问题描述:Android项目引入过多的第三方包时,在编译成dex文件的时候,单个dex文件中的方法总数超过了65535个,此时 ...
前端项目里常见的十种报错及其解决办法
错误一:Uncaught TypeError: Cannot set property 'onclick' of null at operate.js:86 图片.png 原因: 当js文件放在hea ...
Pycharm连接远程服务器、使用Pycharm运行深度学习项目、Pycharm使用总结以及Pycharm报错和解决办法
Pycharm连接远程服务器,使用Pycharm运行深度学习项目以及Pycharm的使用总结文章目录 Pycharm连接远程服务器,使用Pycharm运行深度学习项目以及Pycharm的使用总结前 ...
Error:java: Annotation processing is not supported for module cycles.项目启动报错异常解决
项目在启动时报如下Error错误的原因是:Maven项目中各模块module之间产生了循环依赖,因此在启动运行时就会产生循环依赖的问题,此时需要查看报错信息中显示对应模块的pom.xml,排查删除其中 ...
【转】】Vue项目部署tomcat，刷新报错404解决办法
转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...
idea导入maven项目依赖报错_解决Maven依赖冲突的好帮手，这款IDEA插件了解一下？
1.何为依赖冲突 Maven是个很好用的依赖管理工具,但是再好的东西也不是完美的.Maven的依赖机制会导致Jar包的冲突. 举个例子,现在你的项目中,使用了两个Jar包,分别是A和B.现在A需要依赖 ...