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. 解決分析》

javaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。