解决vue打包报错Unexpected token: punc的问题


Posted in Javascript onOctober 24, 2020

项目中有一个功能模块是使用Vue写的,然后蛋疼的来了,写Vue的同事走了,今天需要改,懵逼状态啊,这是什么?代码还没看懂,就给我出了一个Exception。记录一下,蛋疼历程。

ERROR in static/js/app.33254a875dd731a0b538.js from UglifyJs

Unexpected token: punc (() [./src/mixin/mixin.js:6,8][static/js/app.33254a875dd731a0b538.js:13,19]

好看不?

各种百度啊,有人说,下载新的vue-cli,webpack项目,拷贝.babelrc文件到原项目根目录下

然后再百度,怎么下载vue-cli,更刺激的来了,根本看不懂,一堆cmd,对于一个小白来说,简直残忍啊。

最后找到了一个大神的回复,懒惰的我,当然选择粘贴复制嘞。

解决方案:

1.在工程目录下新建.babelrc文件,注意文件类型选择File就可以了

2.cv大法(懒人专用)

{
 "presets": [
 
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

3.此时npm run build, ok了。

贴个完整的图片:

解决vue打包报错Unexpected token: punc的问题

补充知识:webpack 打包时,代码压缩,删除console与注释

如下所示:

new webpack.optimize.UglifyJsPlugin({
      //删除注释
      output:{
        comments:false
      },
      //删除console 和 debugger 删除警告
      compress:{
        warnings:false,
        drop_debugger:true,
        drop_console:true
      }
    })

uglifyJsPlugin 用来对js文件进行压缩,减小js文件的大小。其会拖慢webpack的编译速度,建议开发环境时关闭,生产环境再将其打开。

vue cli 3.0中, 在vue.config.js中配置

configureWebpack:{
  optimization: {
   minimizer: [
    new UglifyJsPlugin({
     uglifyOptions: {
      // 删除注释
      output:{
       comments:false
      },
      // 删除console debugger 删除警告
      compress: {
       warnings: false,
       drop_console: true,//console
       drop_debugger: false,
       pure_funcs: ['console.log']//移除console
      }
     }
   })
  ]
  }
 }

运行出现报错 UglifyJs

DefaultsError: warnings is not a supported option

降低版本(使用 "uglifyjs-webpack-plugin": "^1.1.1"),打包正常,效果达到

以上这篇解决vue打包报错Unexpected token: punc的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
canvas实现钟表效果
Feb 13 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
You might like
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
canvas知识总结
2017/01/25 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Python脚本实现格式化css文件
2015/04/08 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python中 logging的使用详解
2017/10/25 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
销售部主管岗位职责
2013/12/18 职场文书
小学语文业务学习材料
2014/06/02 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
道歉的话语大全
2015/05/12 职场文书
歼十出击观后感
2015/06/11 职场文书
六一活动主持词
2015/06/30 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle