解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題
使用npm run dev時(shí)運(yùn)行是ok的，但是npm run build打包時(shí)iview報(bào)錯(cuò)，
如下：
原因是iview中使用了es6語(yǔ)法，然而uglifyJs是不支持的，打開(kāi)我們的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編譯的時(shí)候添加如下：
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'),
resolve('test'),resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]
},
先讓iview的es6語(yǔ)法經(jīng)過(guò)babel來(lái)轉(zhuǎn)換，然后在build/webpack.prod.conf.js中，注釋掉原來(lái)的uglifyJs，引入外部的uglifyJs對(duì)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刪除沒(méi)有用到的代碼時(shí)不輸出警告
warnings: false,
// 刪除所有的 `console` 語(yǔ)句
// 還可以兼容ie瀏覽器
drop_console:
true,
// 內(nèi)嵌定義了但是只用到一次的變量
collapse_vars:
true,
// 提取出出現(xiàn)多次但是沒(méi)有定義成變量去引用的靜態(tài)值
reduce_vars:
true,
}
}
}),
當(dāng)然我們要先引入外部插件：
const UglifyJsPlugin =
require('uglifyjs-webpack-plugin');
如此便可解決。
以上這篇解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)首頁(yè)banner自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)首頁(yè)banner自動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue接口請(qǐng)求加密實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
使用Vue3和Pinia實(shí)現(xiàn)網(wǎng)頁(yè)刷新功能
在現(xiàn)代 Web 開(kāi)發(fā)中,保持用戶界面的動(dòng)態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶觸發(fā)某些操作時(shí),例如點(diǎn)擊按鈕或者完成表單提交,我們往往需要刷新頁(yè)面的一部分來(lái)展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來(lái)實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue項(xiàng)目啟動(dòng)后,js-base64依賴報(bào)錯(cuò)Cannot read properties
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后,js-base64依賴報(bào)錯(cuò)Cannot read properties of null(reading ‘replace’)問(wèn)題,2024-05-05
vscode jsconfig.json 使用簡(jiǎn)介
通過(guò)jsconfig.json文件定義一個(gè)JavaScript項(xiàng)目,目錄中是否存在此類文件表示該目錄是JavaScript項(xiàng)目的根目錄,文件本身可以選擇列出屬于項(xiàng)目的文件,要從項(xiàng)目中排除的文件以及編譯器選項(xiàng),這篇文章主要介紹了vscode jsconfig.json 使用說(shuō)明,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇解決vue props 拿不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽(tīng)該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽(tīng)該元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
詳解從vue-loader源碼分析CSS Scoped的實(shí)現(xiàn)
這篇文章主要介紹了詳解從vue-loader源碼分析CSS Scoped的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
如何在vue3中使用滑塊檢驗(yàn)vue-puzzle-verification
這篇文章主要介紹了在vue3中使用滑塊檢驗(yàn)vue-puzzle-verification的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11