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

更新时间：2020年10月24日 09:49:43 作者：峰豆豆

这篇文章主要介绍了解决vue打包报错Unexpected token: punc的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

项目中有一个功能模块是使用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了。

贴个完整的图片：

补充知识：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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue
打包

vue 数据遍历筛选过滤排序的应用操作
这篇文章主要介绍了vue 数据遍历筛选过滤排序的应用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue项目实现通过ip地址访问和localhost访问方式
这篇文章主要介绍了vue项目实现通过ip地址访问和localhost访问方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue中接口域名配置为全局变量的实现方法
今天小编就为大家分享一篇vue中接口域名配置为全局变量的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
jdk1.8+vue elementui实现多级菜单功能
这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
分享Vue子组件接收父组件传值的3种方式
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行类型限制、接收数据的同时对数据类型、必要性、默认值进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下
2022-03-03
Vue组件库ElementUI实现表格加载树形数据教程
这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格加载树形数据教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
微信小程序如何像vue一样在动态绑定类名
这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别，需要的朋友可以参考下
2018-04-04
Vue方法与事件处理器详解
这篇文章主要为大家详细介绍了Vue方法与事件处理器，,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue取消Axios发出的请求
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
2022-09-09
vue双向绑定及观察者模式详解
这篇文章主要介绍了vue双向绑定及观察者模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03