解决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 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery 插件学习(六)
Aug 06 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
基于jquery实现五星好评
Nov 18 jQuery
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
解决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
不错的一个日期输入 动态
2006/11/06 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript定义函数的方法
2010/12/06 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python调用API实现智能回复机器人
2018/04/10 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
仓管员岗位责任制
2014/02/19 职场文书
运动会演讲稿
2014/05/07 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby