解决vue打包报错UglifyJs

报错

1
2
ERROR in js/xxxxxx.js from UglifyJs
Unexpected token: name «Dom7», expected: punc «;» [js/chunk-3068

产生

在vue配置中,由于各插件版本兼容性差异可能会引发此问题的产生。UglifyJs是一款可以解析、混淆、压缩JS的工具,此处的UglifyJs是配置在脚手架/webpack中,运行在node环境中的小插件。
关于UglifyJs:

  1. uglify-js@3具有简化的API和CLI,该API和CLI与不能向后兼容uglify-js@2。
  2. UglifyJS 2.x版本的文档可以在这里找到。
  3. glify-js 仅支持JavaScript(ECMAScript 5)。
  4. 要缩小ECMAScript 2015或更高版本,请使用Babel之类的工具进行翻译。

解决

低版本:

  • 原因: UglifyJs不支持ES6语法,因此报错。
  • 解决方案: 项目根目录下创建文件.babelrc,配置如下
    1
    2
    3
    {
    "pressets": ["es2015"]
    }

高版本:

  • 原因1:UglifyJs版本过低
  • 解决方案: 升级UglifyJs版本

    1
    npm install uglify-js -g
  • 原因2: babel 转译问题

  • 解决方案: 找到babel的配置项transpileDependencies,如下操作:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 旧
    transpileDependencies: [
    /* string or regex */
    ],

    // 改为如下⬇️

    // 新
    transpileDependencies: [
    'vue-particles',
    'animejs'
    ],

重新打包

npm run build,完毕。

vue-cli@3.x vue.config.js配置混淆压缩代js及去除console(缺少的插件先安装上)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 去除console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 压缩css、js
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 要压缩的文件
const productionGzipExtensions = ['js', 'css'];


module.exports = {
// something else codes

configureWebpack: (config) => {
// 如果不是开发环境
if (env !== 'development') {
// 代码压缩
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),
threshold: 10240,
minRatio: 0.8,
}));

// 打包后清除断点和控制台打印
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true, // 注释debugger
drop_console: true, // 注释console
pure_funcs:['console.log'] // 移除console
},
},
sourceMap: false, // 去除打包后生成的.map文件
parallel: true,
}),

);
}
},
}


希望能够解决您的问题。

---本文结束感谢您的阅读---

本文标题:解决vue打包报错UglifyJs

文章作者:Lomo 朱幸民

发布时间:2019年12月06日 - 12:13:29

最后更新:2020年02月14日 - 16:33:23

原始链接:https://www.zhuxingmin.com/2019/12/06/解决vue打包报错UglifyJs/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%