解决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实现首页banner自动轮播效果

    Vue实现首页banner自动轮播效果

    这篇文章主要为大家详细介绍了Vue实现首页banner自动轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue接口请求加密实例

    vue接口请求加密实例

    这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 使用Vue3和Pinia实现网页刷新功能

    使用Vue3和Pinia实现网页刷新功能

    在现代 Web 开发中,保持用户界面的动态性和响应性至关重要,当用户触发某些操作时,例如点击按钮或者完成表单提交,我们往往需要刷新页面的一部分来展示最新的数据,本文将介绍如何使用 Vue 3 和 Pinia 来实现这一功能,需要的朋友可以参考下
    2024-08-08
  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    今天小编就为大家分享一篇解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue项目启动后,js-base64依赖报错Cannot read properties of null(reading ‘replace’)问题

    vue项目启动后,js-base64依赖报错Cannot read properties 

    这篇文章主要介绍了vue项目启动后,js-base64依赖报错Cannot read properties of null(reading ‘replace’)问题,
    2024-05-05
  • vscode jsconfig.json 使用简介

    vscode jsconfig.json 使用简介

    通过jsconfig.json文件定义一个JavaScript项目,目录中是否存在此类文件表示该目录是JavaScript项目的根目录,文件本身可以选择列出属于项目的文件,要从项目中排除的文件以及编译器选项,这篇文章主要介绍了vscode jsconfig.json 使用说明,需要的朋友可以参考下
    2023-09-09
  • 解决vue props 拿不到值的问题

    解决vue props 拿不到值的问题

    今天小编就为大家分享一篇解决vue props 拿不到值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue点击input弹出带搜索键盘并监听该元素的方法

    vue点击input弹出带搜索键盘并监听该元素的方法

    今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解从vue-loader源码分析CSS Scoped的实现

    详解从vue-loader源码分析CSS Scoped的实现

    这篇文章主要介绍了详解从vue-loader源码分析CSS Scoped的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 如何在vue3中使用滑块检验vue-puzzle-verification

    如何在vue3中使用滑块检验vue-puzzle-verification

    这篇文章主要介绍了在vue3中使用滑块检验vue-puzzle-verification的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11

最新评论