首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决vue打包报错UglifyJs

解决vue打包报错UglifyJs

作者头像
流眸
发布2019-12-30 15:20:58
4.6K0
发布2019-12-30 15:20:58
举报

报错

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,配置如下
{
    "pressets": ["es2015"]
}
高版本:
  • 原因1:UglifyJs版本过低
  • 解决方案:升级UglifyJs版本
npm install uglify-js -g
  • 原因2: babel 转译问题
  • 解决方案:找到babel的配置项 transpileDependencies,如下操作:
// 旧
transpileDependencies: [
/* string or regex */
],

// 改为如下⬇️

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

重新打包

npm run build,完毕。

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

// 去除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,
                }),

            );
        }
    },
}

希望能够解决您的问题。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 流眸 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 报错
  • 产生
  • 解决
    • 低版本:
      • 高版本:
      • 重新打包
      相关产品与服务
      文件存储
      文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档