Solution to build error in Vue project (error in static/JS)/vendor.xxxxx.js from UglifyJs）

The project that has been running very well suddenly reported an error in build. The error message is as follows:

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.

In uglifyjs’ GitHub issues # 78, we found such a solution: because uglifyjs only supports Es5, and element UI may introduce a part of the writing of ES6, so webpack packaging fails. The final solution given in issue is to replace uglify JS with uglify es of beta version (beta version introduces support for es2015 +). You need to execute the command NPMI - D in the front-end working directory uglifyjs-webpack-plugin@beta 。

However, after trying, we found that the problem of build error is still unsolved. After searching for the problem, we decided to use bable to parse the element UI. To complete this operation, we only need to modify the build error in the front-end folder/ webpack.base.conf The. JS file can be modified as follows:
before modification

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

After modification

 

module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',//Note that elementUI's source code needs to be parsed using ES6
include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')]
},
...

It is equivalent to adding element UI to the package that needs to be parsed by Babel.

After that, execute NPM run build again, and the build is successful.

Read More: