解决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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue从TodoList中学父子组件通信
Feb 05 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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 生成WML页面方法详解
2009/08/09 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
常用的javascript设计模式
2017/01/11 Javascript
面包屑导航详解
2017/12/07 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python if语句知识点用法总结
2018/06/10 Python
Python3几个常见问题的处理方法
2019/02/26 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
护理学专业推荐信
2013/12/03 职场文书
自我鉴定怎么写
2014/01/12 职场文书
养殖项目策划书范文
2014/01/13 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
大学新生军训感言
2014/02/25 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
英语教研活动总结
2014/07/02 职场文书
工作所在部门证明
2014/09/21 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
宿舍管理制度范本
2015/08/07 职场文书
公司与个人合作协议书
2016/03/19 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL