解决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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3项目打包后自动化部署到服务器的方法

    一.安装 scp2 npm install scp2 --save-dev 二.写好脚本 例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',

  • vue大型项目之分模块运行/打包的实现

    本文以vue-cli3+为例,实现多系统集成下的分模块打包.分模块打包方式多种多样,下文可适用于多系统之间互不干扰,主系统可集成各子系统,各子系统又可单独运行的业务场景. 一.目标 我们要实现什么?所谓分模块打包,那么各个模块内就必须得有自己独立的入口文件,路由文件.按照这种构想,我在一个新的脚手架src目录下新建了一个projects目录: 如上图,可以看到Aproject.B.C.D四个项目.我在A项目中建了assets,common和views文件夹,其中assets可以再建img和css

  • vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决

  • 解决vue2中使用elementUi打包报错的问题

    bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:

  • vue将文件/图片批量打包下载zip的教程

    vue将文件/图片批量打包下载 各种格式都可以,只要url能够打开或者下载文件即可. 1.通过文件的url,使用js的XMLHttpRequest获取blob 2.将blob压缩为zip 由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒 添加依赖 //npm install jszip //npm install file-saver 在页面的script中引入依赖 import JSZip from 'jszip' import FileSa

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

  • 解决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] 好

  • nvm版本导致npm install报错Unexpected token '.'的解决办法

    nvm版本导致npm install报错Unexpected token '.'的解决办法

    目录 前言 npm install报错 降低node版本 升级nvm版本 总结 前言 前几天切换了node版本,顺带着升级了npm,今天使用nodemon启动node环境时发现报错,提示未安装.没安装就安装了下,结果!冒出来一大堆问题. npm install报错 我使用npm install nodemon -g直接给我报错,不信邪接着npm install cnpm -g还是报错. 这个报错我是真的看不懂,我去网上搜了下,发现也有人遇到过这个问题,好像是使用nvm-windows控制node

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • 完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误

    报错信息 最近闲来无事,用python的tkinter库开发了一款带日程提醒的万年历桌面程序.在程序开发结束开始打包时,却发现一直报错 PyInstaller cannot check for assembly dependencies. Please install PyWin32 or pywin32-ctypes. pip install pypiwin32 但是运行pip install pypiwin32时却提示两个库都已经安装过了 可是当再运行打包脚本时就是死活无法打包,就是提示缺少

  • vue打包报错:ERROR in static/js/xxx.js from UglifyJs undefined问题

    目录 报错信息如下 尝试解决办法 vue项目打包报错 报错信息如下 ERROR in static/js/xxxxxxxxxx.js from UglifyJs undefined 注意了!很多文章的报错信息 都有 vendor. 开头的,例如: ERROR in static/js/vendor.xxxx.js from UglifyJs 但我这个没有 vender! 所以也并不是什么大部分博客所说的ES6语法编译不通过的问题! 最后还有个很关键的 undefined 具体的错误信息忘记截图贴

  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com

  • Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

    Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)

    目录 Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘) 第一次解决问题 第二次解决问题 Vue引入Echarts报错解决 Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘) 代码: 报错信息: 上面的报错主要是: Cannot set properties of undefined (setting ‘plate’) 翻译之后就是:无法

  • Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法

    目录 问题: 一.public下的index.html没有引入其他外部js文件. 二. public下的index.html引入其他外部js文件. 原因一.引用文件的位置不正确 原因二:配置信息不正确 原因三:script的引入类型不对 总结 问题: 最近做vue项目时,当我访问二级路由的时候,就会报Uncaught SyntaxError: Unexpected token ‘<‘错误,而我访问一级路由不会报错.翻了网上很多资料,都无法解决. 一.public下的index.html没有引入其

  • Vue项目报错:parseComponent问题及解决

    Vue项目报错:parseComponent问题及解决

    目录 Vue项目报错:parseComponent 报错内容 解决步骤 Vue常见错误及解决办法 1.在配置路由并引入组件后 2.在组件中的标签和样式中图片路径出错时 3.在组件中标签没有闭合 4.在使用less定义变量是报错 本地开发环境请求服务器接口跨域的问题 Vue项目报错:parseComponent 报错内容 ERROR  Failed to compile with 1 error                                                    

随机推荐