解決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
}),
已經(jīng)提示了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語法經(jīng)過babel來轉(zhuǎn)換，然后在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,
// 內(nèi)嵌定義了但是只用到一次的變量
collapse_vars:
true,
// 提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值
reduce_vars:
true,
}
}
}),
當(dāng)然我們要先引入外部插件：
const UglifyJsPlugin =
require('uglifyjs-webpack-plugin');
如此便可解決。
以上這篇解決iview打包時UglifyJs報錯的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼
本文主要介紹了VUE側(cè)邊導(dǎo)航欄實現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細(xì)介紹了Vue的基本知識，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
如何隱藏element-ui中tree懶加載葉子節(jié)點checkbox(分頁懶加載效果)
這篇文章主要介紹了如何隱藏element-ui中tree懶加載葉子節(jié)點checkbox(分頁懶加載效果)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
今天在移動端項目中遇見一個需求,需要數(shù)據(jù)無限滾動,所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動指令的詳細(xì)過程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3使用全局websocket的相關(guān)知識,文中的示例代碼講解詳細(xì),對我們深入學(xué)習(xí)vue3有一定的幫助,感興趣的小伙伴可以參考一下2023-10-10
intellij?idea+vue前端調(diào)試配置圖文教程
在Vue項目開發(fā)過程中,當(dāng)遇到應(yīng)用邏輯出現(xiàn)錯誤,但又無法準(zhǔn)確定位的時候,知曉Vue項目調(diào)試技巧至關(guān)重要,debug是必備技能,這篇文章主要給大家介紹了關(guān)于intellij?idea+vue前端調(diào)試配置的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細(xì)介紹Vue自定義指令的詳細(xì)內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue事件的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01