解决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 相关文章推荐
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
VuePress 中如何增加用户登录功能
Nov 29 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
PHP has encountered an Access Violation
2007/01/15 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
js实现蒙版效果
2020/01/11 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
详解vue 组件
2020/06/11 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python装饰器使用方法实例
2013/11/21 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python内存管理机制原理详解
2019/08/12 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
聚会通知怎么写
2015/04/23 职场文书
导游词之岳阳楼
2019/09/25 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers