解决vue-cli element-ui打包报错Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js

1.问题描述

我用vue-cli写了项目，界面都是用element-ui写的，打包时报错：

ERROR in static/js/19.7a249ea6c2bf376ba720.js from UglifyJs

Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js:24,0][static/js/19.7a249ea6c2bf376ba720.js:237,9]

2.问题理解

我理解了一下报错信息：
报错说有一个错误在打包后的文件中：

static/js/19.7a249ea6c2bf376ba720.js

，

错误的原因是：Unexpected token: punc (() ，即：不能识别操作符（"(()"）

源文件出错地方是：

/element-ui/packages/row/src/row.js

第

24

行第

0

列

打包文件出错地方：

static/js/19.7a249ea6c2bf376ba720.js

第237行第

0

列

于是我找到两个文件出错的代码一看，

发现代码是一样的！

(()
=> {});

中的(()=>{})是es6的语法。但是现在很多浏览器不完成支持es6语法，所以才需要在打包过程中转换成es5语法。

static/js/19.7a249ea6c2bf376ba720.js是打包的结果，这个文件是会放在浏览器运行的，如果浏览器不支持es6语法，那代码就会出错。

所以

npm run build

报出错误信息，也是合理的，如果你不理会这个报错信息，把代码拿取浏览器运行，就会出错。

3.解决问题

在自己项目中的

webpack.base.conf.js

找到了类似的地方，并加入配置

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

resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')//---添加这行

]
},

如果您的vue-cli项目或webpack项目也遇到类似的错误，可以试试这样解决。

感慨一下：

了解问题的本质比知道问题的答案重要

遇到问题需要抽丝剥茧地逐层分析