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

2401_84411433

于 2024-05-08 18:55:43 发布

阅读量349

点赞数 4

分类专栏：程序员文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/2401_84411433/article/details/138582660

版权

程序员专栏收录该内容

217 篇文章 2 订阅

订阅专栏

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

一、前言

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: [
...
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。