解決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進(jìn)行壓縮混淆，代碼如下：
// 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)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)首頁banner自動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue接口請求加密實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
解決vue項目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題
今天小編就為大家分享一篇解決vue項目中頁面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項目啟動后,js-base64依賴報錯Cannot read properties
這篇文章主要介紹了vue項目啟動后,js-base64依賴報錯Cannot read properties of null(reading ‘replace’)問題,2024-05-05
通過jsconfig.json文件定義一個JavaScript項目,目錄中是否存在此類文件表示該目錄是JavaScript項目的根目錄,文件本身可以選擇列出屬于項目的文件,要從項目中排除的文件以及編譯器選項,這篇文章主要介紹了vscode jsconfig.json 使用說明,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇解決vue props 拿不到值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)
這篇文章主要介紹了詳解從vue-loader源碼分析CSS Scoped的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
如何在vue3中使用滑塊檢驗vue-puzzle-verification
這篇文章主要介紹了在vue3中使用滑塊檢驗vue-puzzle-verification的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11