Vue进阶(幺捌玖):项目build报错的解决办法(ERROR in static/js/**.js from UglifyJs

举报
SHQ5785 发表于 2021/11/16 15:31:26 2021/11/16
【摘要】 一、前言Vue项目编译过程中,出现如下错误信息:ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJsUnexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/ven...

一、前言

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 只支持 ES5element-ui 可能引入了一部分 ES6 的写法,所以导致 webpack 打包失败。所以出现此类问题的一般是由于 ES6 语法转换为 ES5 失败导致。

vue配置中,由于各插件版本兼容性差异可能会引发此问题的产生。UglifyJs是一款可以解析、混淆、压缩JS的工具,此处的UglifyJs是配置在脚手架/webpack中,运行在node环境中的小插件。
关于UglifyJs

  • uglify-js@3具有简化的APICLI,该APICLI不能向后兼容uglify-js@2
  • UglifyJS 2.x 版本的文档可以在这里找到。
  • Uglify-js 仅支持JavaScriptECMAScript 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,成功。

拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200