项目中有一个功能模块是使用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大法(懒人专用)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
{
"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与注释
如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
|
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中配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/u012103212/article/details/80966914