解决iview打包时UglifyJs报错的问题

 更新时间:2018年03月07日 09:18:29   作者:Tiramisu_C  
下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

使用npm run dev时运行是ok的,但是npm run build打包时iview报错,

如下:

原因是iview中使用了es6语法,然而uglifyJs是不支持的,打开我们的build/webpack.prod.conf.js文件,可以看到

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

已经提示了uglifyJs不支持es6.

解决方案:

在webpack.base.conf.js中,我们先在js编译的时候添加如下:

{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test'),resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]
},

先让iview的es6语法经过babel来转换,然后在build/webpack.prod.conf.js中,注释掉原来的uglifyJs,引入外部的uglifyJs对js进行压缩混淆,代码如下:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
// }),
new UglifyJsPlugin({
// 使用外部引入的新版本的js压缩工具
parallel: true,
uglifyOptions: {
ie8: false,
ecma: 6,
warnings: false,
mangle: true,
// debug false
output: {
comments: false,
beautify: false,
// debug true
},
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句
// 还可以兼容ie浏览器
drop_console: 
true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: 
true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: 
true,
}
}
}),

当然我们要先引入外部插件:

const UglifyJsPlugin =
require('uglifyjs-webpack-plugin');

如此便可解决。

以上这篇解决iview打包时UglifyJs报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE侧边导航栏实现筛选过滤的示例代码

    VUE侧边导航栏实现筛选过滤的示例代码

    本文主要介绍了VUE侧边导航栏实现筛选过滤的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue系列:通过vue-router如何传递参数示例

    Vue系列:通过vue-router如何传递参数示例

    本篇文章主要介绍了Vue系列:通过vue-router如何传递参数示例,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • Vue的基本知识你都了解吗

    Vue的基本知识你都了解吗

    这篇文章主要为大家详细介绍了Vue的基本知识,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)

    如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)

    这篇文章主要介绍了如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 手写vue无限滚动指令的详细过程

    手写vue无限滚动指令的详细过程

    今天在移动端项目中遇见一个需求,需要数据无限滚动,所以下面这篇文章主要给大家介绍了关于手写vue无限滚动指令的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue3使用全局websocket的示例详解

    vue3使用全局websocket的示例详解

    这篇文章主要为大家详细介绍了vue3使用全局websocket的相关知识,文中的示例代码讲解详细,对我们深入学习vue3有一定的帮助,感兴趣的小伙伴可以参考一下
    2023-10-10
  • intellij idea+vue前端调试配置图文教程

    intellij idea+vue前端调试配置图文教程

    在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能,这篇文章主要给大家介绍了关于intellij idea+vue前端调试配置的相关资料,需要的朋友可以参考下
    2024-09-09
  • Vue自定义指令详细

    Vue自定义指令详细

    这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下
    2021-11-11
  • Vue事件的基本操作你知道吗

    Vue事件的基本操作你知道吗

    这篇文章主要为大家详细介绍了Vue事件的基本操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    本篇文章主要介绍了详解使用Vue.Js结合Jquery Ajax加载数据的两种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论