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

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，成功。

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件