记一次vue build报错的问题：UglifyJs Unexpected token name

解决Vue build报错：UglifyJs Unexpected token name问题
最新推荐文章于 2024-02-25 17:44:11 发布
原创 最新推荐文章于 2024-02-25 17:44:11 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在项目中引入鹅厂TRTC组件时遇到UglifyJs编译错误。原因是UglifyJs不支持ES6语法。在webpack配置中针对组件进行处理可解决该问题。但针对TRTC，更佳解决方案是将trtc.js文件单独引入，并在需要的页面直接使用，避免npm卸载和打包问题。
部署运行你感兴趣的模型镜像

起因：

要在项目中嵌入鹅厂的TRTC组件。前端引入TRTC之后，使用npm run build编译报错。

原因：

资料地址：https://www.jason-z.com/post/uglifyjs-unexpected-token-name

网上搜了一圈，说是UglifyJs无法解析ES6的语法，引入的组件里包含了ES6.

 

解决：

在项目的build\webpack.base.conf.js 文件中，在入下图所示位置加入对指定组件的处理，重新编译，就不报错了。

 

另：

记录在此次解决过程中学习到的知识点!

带^ 的是指最新版本，不带的是指 指定版本

 

2020-09-16更新

以上的方法可能有用，不过应该是针对于某些组件来说。但是针对于本次的TRTC来说，以上的方法无法解决，使用了之后TRTC无法引入，页面报错，undefined。

提供另一种解决方案：

这是原本按照官方文档里提供的使用方案操作下载的TRTC包

前端API文档地址：https://trtc-1252463788.file.myqcloud.com/web/docs/TRTC.html
小程序API文档地址：https://cloud.tencent.com/document/product/647/17018
桌面浏览器版demo地址：https://cloud.tencent.com/document/product/647/32398

1，先将trtc.js文件提取出来，放置项目某一目录

2，先在项目里卸载trtc：执行  npm uninstall trtc-js-sdk

3，在vue项目的index.html里引入trtc.js

4，在要使用TRTC的页面直接使用即可。

 

本文针对于我的项目中使用trtc导致的UglifyJs Unexpected token name提供解决方案，在实际的其他项目中，可能有其他的组件也会有类似情况，在此只是以此组件作为案例提供解决思路，具体情况请具体分析。

不积跬步，无以至千里。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

vue2/3 - 打包出现报错：ERROR in static/js/xxx.js from UglifyJs Unexpected token: name(toSJISFunction)完美解决!
高级前端工程师
03-01 3806
vue，vue2打包报错，vue3打包时报错，npm run build，无法打包怎么办，打包时出现报错ERROR in static/js/xxx.js from UglifyJs Unexpected token: name(toSJISFunction)如何解决，如何解决build打包时出现报错，vue报错，解决报错，终端提示错误，浏览器报错，vue如何解决项目最终打包时出现报错，vue3 build打包报错，vue2执行biuld打包命令时报错，build打包命令，vue2/3 - 打包出现报错：E
vue 报错 Unexpected token <
Lee的博客
03-08 8297
找到config下的index.js文件 改成如下配置 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { ...
webpack打包出错：... UglifyJs Unexpected token name(...)解决方案
sinat_36227086的博客
04-15 5560
1.问题描述： 使用webpack打包的时候出现Unexpected token: name的错误，完整报错如下： ERROR in js/app.beef0790.js from UglifyJs Unexpected token: name (result) [./node_modules/_node-rsa@1.1.1@node-rsa/src/formats/openssh.js:12,0][static/js/vendor.4e305fead8c777fd6b59.js:81119,12....]
vue build 报错 UglifyJs
sonight_top的博客
07-12 355
描述在npm run build的时候突然报错 ERROR in static/js/vendor.31c4876892a389c58491.js from UglifyJs Unexpected token: name (raf) [./node_modules/_resize-detector@0.1.10@resize-detector/esm/index.js:1,0][static/js/vendor.31c4876892a389c58491.js:19085,4] 原因是UglifyJs支.
vue 打包失败问题UglifyJs Unexpected token: name
liu_chenglong的博客
10-12 1782
> 注：适用于大多数 ``UglifyJs Unexpected token: name`` 的情况，犹如 `element-ui`、`image-conversion`、`xlsx`等插件。 ## 问题背景：最近在做一个`vue读取本机的excel文件的两种方式`的需求，即本地浏览器将用户上传的excel文件解析出来并展示给用户查看，再选择要导入的数据，将其调用接口保存到数据库。 在打包时报了一个错误，如下： ERROR in static/js/24.js from UglifyJs Unexpecte
记录一次使用了UglifyJs插件npm run build报错的问题
weixin_43530377的博客
01-08 451
如图，npm run build打包，报js文件某行报错，实际上是这个文件用了es6的语法，导致UglifyJs无法压缩 那么我们可以使用babel-loader先去处理下。配置时注意要配置在node_modules中的实际路径。具体配置如下： webpack.base.conf.js文件中关于js的配置处，加上 resolve(‘报错的文件或指定文件夹’) ...
vue项目出现Uncaught SyntaxError: Unexpected token ＜ 解决方案
热门推荐
oopxiajun博客专栏
08-25 5万+
现象 开发 测试 启动 npm run dev 能正常访问 打包 npm run build 后访问页面出现空白，浏览器F12 查看报错 就一个简单的页面，连个js文件都没引用，结果出现Uncaught SyntaxError: Unexpected token < 细究原因 服务器端，要是访问了一个不存在的文件【路径写错了】返回了一个404的提示页面 看看vue最后打包的index.html中的内容 <!DOCTYPE html><html> &...
Vue打包报错Unexpected token: punc(()解决方案
weixin_34310785的博客
03-27 3702
（用vscode）vue项目打包时，报错，报错信息如下： ERROR in static/js/0.564c764efc3ecf31190c.js from UglifyJs Unexpected token: punc (() [App.vue?4b081dc6:15,0][static/js/0.564c764efc3ecf31190c.js:89,9] ERROR in sta...
解决Vue打包报错：ERROR in static/js/xxx.js from UglifyJs Unexpected token: name ...
weixin_63590089的博客
02-25 919
事情到这里一般就结束了，但是当运行自己项目的时候，发现引用这个js模块的页面不能加载了。显然是上面引入导致的问题。今天从公司拉取了一个项目代码修改功能，npm run dev都好好的，没有问题。到打包的时候莫名就报了一个错误。主要原因是安装的第三方插件使用es6语法，压缩插件不支持导致，debug依赖里面js es6转es5失败。这边都是百度找到的答案，本人还是一知半解，有知道的大佬可以解释一下原因。就能解决，自己注意自己报错js的路径，这样重新打包就不会报错了。,这样我们的项目就可以正常运行打包了。
没有使用uglifyjs，但是打包报UglifyJs错误；Unexpected token: name (raf) [main_25188b.js:121200,4]
qq_44869043的博客
10-27 1209
尝试了很多方法，没能够拿到 GitLab 或 Docker build 后的代码，拿不到 main_25188b.js 文件，就一直无法从这个文件里查看是哪里的代码出现问题。第三行 包含的文件：清空，不要有任何字符或空格，如果有很明确的报错地方，也可以将该文件夹的名称写上去，如果确定就是node_modules报错，可以写上。只需要找出是哪个依赖包的 js 文件没有编译为 es5 ，将这个依赖包 include 进 babel-loader 中，就可以解决这个问题。所以我们是哪个依赖包出了问题。
uglifyjs打包报错问题、打包后部分ios机型不显示问题处理
weixin_43837268的博客
05-08 436
1、打包报错问题 升级最新uglifyjs npm i uglifyjs-webpack-plugin -S 2、打包后部分ios机型不显示问题处理 添加兼容safari10 new UglifyJsPlugin({ uglifyOptions:{ mangle: { safari10: true }, } }) ...
uglifyjs报错 webpack_webpack3里使用uglifyjs压缩js时打包报错的解决
weixin_39588983的博客
01-30 329
环境：webpac<4的下，安装uglifyjs。cnpm install uglifyjs-webpack-plugin -D安装完毕后，去npm里查看uglifyjs的使用方法并添加到代码中：const UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = {//...optimization: {mini...
Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-30 641
vue 项目可以正常启动运行，但是使用 vuecli3 打包时却 js 报错，项目里使用了 html2canvas 跟 jspdf，然后打包里面使用了。不支持新的 es6 语法，解决方法就是使用。配置，注意这里需要用 4.x 版本的。...
【Webpack】npm run build 打包报错 Uglifyjsplugin of undefined
时间飞逝的博客
04-11 2951
npm run build 打包报错 Uglifyjsplugin of undefined
UglifyJsPlugin is not defined报错的坑
qq_39596012的博客
12-08 3023
项目场景：webpack中使用插件uglifyjs-webpack-plugin打包压缩 问题描述： 不管怎么引用都会报错 UglifyJsPlugin is not defined 原因分析： 1. 是UglifyJS不支持ES6的语法。理论上不应该。 2. 发现uglifyjs-webpack-plugin 2.0版本的Release日志中，明确提示重新切换回到uglify-js，因为uglify-es被废弃了，如果需要ES6代码压缩，请使用terser-webpack-plugin 解决方案：
关于在React build时遇到关于打包失败的问题 “Error in js/app.xxxx.js from UglifyJs undefined”
CK_Wang_Sir的博客
11-22 4276
昨天搞了一个月的React前端项目可算是整完了，样式也调整完毕了，满怀欣喜的打算部署到测试环境上看看效果，结果。。 肝疼。。。。。出现错误，来吧 解决吧 先看看错误啥意思 “ 错误在 js/app.13xxxxx.js 在uglifyjs undefined ”？？？我擦 这是啥个意思。 本着不明白咱就百度 “uglifyjs ” 是压缩js作用 然后 这个错误貌似就是 这个 文件 压...
vue打包遇到的UglifyJs问题
hanz666的博客
12-15 6191
今天准备打包最近手头正在做的一个vue项目到测试环境跑一下，顺便测试一下，可是不想打包的时候出现了ERROR in static/js/vendor.6ee331eab7d8c9bf1876.js from UglifyJs Unexpected token name «i», expected punc «;» [static/js/vendor.6ee331eab7d8c9bf1876.js:1
UglifyJs 压缩 报错 Unexpected token name «i», expected punc «;»
haya的博客
12-10 1894
UglifyJs 压缩 报错 Unexpected token name «i», expected punc «;» 在自己项目中的webpack.config.js 加入 { test: /iview.src.*?js$/, loader: 'babel-loader' },
UglifyJS压缩的一个奇怪的bug及解决办法
James Ren的专栏
11-13 3248
今天遇到一个很奇怪的问题，在开发测试没有问题的JS代码，放到服务器上chrome就报错，错误为‘[color=red]ReferenceError: b is not defined[/color]’，初步断定是UglifyJS压缩有问题，我们将未压缩的代码放到服务器上，发现问题消失。 接着就要查找原因了，将压缩的代码用netbeans打开，使用ALT+SHIFT+F格式化，找到了错...
ERROR [vite:vue] Error parsing JavaScript expression: Unexpected token, expected "," (1:31) 10:06:03 file: C:/Users/Administrator/Desktop/afd/edu/admin/src/views/detail/index.vue:92:37 ERROR error during build: 10:06:03 SyntaxError: Error parsing JavaScript expression: Unexpected token, expected "," (1:31)
最新发布
04-01
<think>嗯，用户遇到了Vue项目中JavaScript语法错误的问题，具体是在使用Vite和Vue时出现“SyntaxError: Unexpected token, expected comma”的错误，发生在index.vue文件中。我需要先分析可能的原因，然后给出解决方案。 首先，这个错误通常表示JavaScript解析器在某个地方遇到了意外的符号，而期望的是一个逗号。常见的情况可能是在对象字面量、数组或者函数参数中缺少逗号，或者在模板字符串中使用表达式时语法不正确。 考虑到用户使用的是Vue单文件组件（.vue文件），需要检查<script>部分和模板中的表达式。比如，在模板中的v-bind或v-for指令里，可能使用了不正确的语法。例如，对象字面量属性之间缺少逗号，或者数组元素没有正确分隔。 另外，Vue 3的模板语法要求更严格，尤其是在处理动态属性或方法时。例如，在v-for循环中，如果使用对象解构，可能需要额外的括号包裹，否则会导致语法错误。比如，v-for="{ id, name }, index in items"如果没有括号，可能会被解析器误认为语法错误。 还有可能是模板中的表达式使用了JavaScript的新语法，比如可选链操作符（?.）或空值合并操作符（??），如果项目的Babel配置不支持这些语法，或者Vite的版本较旧，可能会导致解析错误。需要检查项目中的Babel或TypeScript配置，确保支持这些语法特性。 另外，检查是否有在属性绑定中错误地混用了单引号和双引号，或者在动态属性值中忘记使用冒号（:）进行绑定，导致解析器无法正确识别。例如，:class="{ active: isActive }"如果写成class="{ active: isActive }"就会导致问题。 还需要注意在模板中使用方法调用时，是否遗漏了逗号或括号。例如，@click="handleClick(param1, param2)"如果参数之间缺少逗号，或者括号不匹配，也会引发语法错误。 可能的解决步骤包括：检查报错位置附近的代码，确认对象、数组的语法是否正确；确保模板中的表达式符合JavaScript语法；使用ESLint进行代码检查；更新Vite和相关依赖到最新版本；确认Babel/TypeScript配置支持使用的语法。 此外，用户可能没有正确使用Vue 3的setup语法糖，比如在<script setup>中未正确导出变量或方法，导致模板中引用时出错。需要检查<script setup>部分是否有语法错误，比如变量声明或方法定义是否正确。 最后，如果用户在模板中使用了复杂的表达式，可能需要将其拆解为计算属性或方法，以避免模板中的表达式过于复杂，增加出错的可能性。</think>### Vue项目JavaScript语法错误解决方案 #### 1. 定位错误位置 在Vite错误提示中会显示具体文件路径和行号： ```bash index.vue:5:23 - SyntaxError: Unexpected token, expected comma ``` 这表示错误位于index.vue第5行第23个字符处 #### 2. 常见错误模式及修复 **(1) 对象/数组字面量语法错误** ```javascript // 错误示例 const obj = { name: 'Alice' // 缺少逗号 age: 25 } // 正确写法 const obj = { name: 'Alice', age: 25 } ``` **(2) 模板字符串表达式格式错误** ```vue <!-- 错误示例 --> <div :title="`User-${user.id}-${user.name}`></div> <!-- 正确写法 --> <div :title="`User-${user.id}-${user.name}`"></div> ``` **(3) Vue模板指令参数错误** ```vue <!-- 错误示例 --> <button @click="handleClick(param1 param2)">Submit</button> <!-- 正确写法 --> <button @click="handleClick(param1, param2)">Submit</button> ``` #### 3. 特殊场景处理 **(1) JSX语法组件** ```javascript // 错误示例 const Component = () => ( <div class={ active: isActive }> // 缺少样式对象包裹 ) // 正确写法 const Component = () => ( <div style={{ color: activeColor }}> // 双大括号包裹对象 ) ``` **(2) Composition API语法** ```javascript // 错误示例 <script setup> const count = ref(0) const doubleCount = computed(() => count.value * 2) </script> <template> <button @click="count++"> // 直接修改ref需要.value </template> // 正确写法 <button @click="count.value++"> ``` #### 4. 开发环境配置建议 1. 安装ESLint插件： ```bash npm install eslint eslint-plugin-vue --save-dev ``` 2. 配置vite.config.js： ```javascript export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { whitespace: 'preserve' // 保留模板空格 } } }) ] }) ``` 3. 推荐使用Volar扩展替代Vetur，提供更好的类型检查支持[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值