在vue中使用image-webpack-loader實(shí)例
首先打開(kāi) webpack.base.confi.js
提示：在這里url-loader 和 image-webpack-loader 不能一起使用，否則會(huì)導(dǎo)致圖片出不來(lái)
接著找到
module: {
rules: [
{}...
]
}
在這里寫(xiě)入，一定要先寫(xiě) ‘file-loader' 才能使用 'image-webpack-loader'
有各種配置，可以調(diào)整你要壓縮后圖片的質(zhì)量
提示：如果使用了 webp 會(huì)大大減少體積，但是ios并不支持這個(gè)格式，會(huì)導(dǎo)致在ios上看不見(jiàn)圖片
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: 'mobile/img'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 50
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.5, 0.65],
speed: 4
},
gifsicle: {
interlaced: false,
},
//ios不支持
// webp: {
// quality: 100
// }
}
}
]
},
補(bǔ)充知識(shí)：記一次vue-cli3中 mage-webpack-loader 圖片優(yōu)化時(shí)，亂碼報(bào)錯(cuò)的問(wèn)題
命令行 npm install --save-dev image-webpack-loader在開(kāi)發(fā)環(huán)境中下載下來(lái)優(yōu)化包以后，在vue.config.js(vue-cli3配置文件)中使用如下
代碼: chainWebpack函數(shù)下
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
但是這樣在dev 以后
一堆亂碼的報(bào)錯(cuò)
我同事在使用這個(gè)的時(shí)候，也出現(xiàn)了一系列無(wú)法找到 image-webpack-loader模塊這類(lèi)的報(bào)錯(cuò)
在查閱百度，論壇，有遇到這個(gè)問(wèn)題的，但沒(méi)人解決的
后面看了一下，找到是包安裝的問(wèn)題，npm下載下來(lái)的時(shí)候因?yàn)榉瓑Φ膯?wèn)題，包下載的不完全
后面npm uninstall image-webpack-loader 刪除了包
然后cnpm install --save-dev image-webpack-loader 鏡像下載解決的
流下了沒(méi)有技術(shù)的淚水~
以上這篇在vue中使用image-webpack-loader實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解
這篇文章主要為大家介紹了vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了如何讓vue長(zhǎng)列表快速加載，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
在Vue項(xiàng)目中,通過(guò).env文件配置環(huán)境變量,支持不同環(huán)境下加載不同配置,Vite通過(guò)import.meta.env向應(yīng)用暴露環(huán)境變量,支持基本URL、開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境識(shí)別等,.env文件可設(shè)置環(huán)境優(yōu)先級(jí),修改后需重啟生效,TypeScript可通過(guò)增加文件獲取智能提示2024-10-10
vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明
這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作
這篇文章主要介紹了vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析
vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性,不過(guò)可以使用Vue.set()方法將響應(yīng)式屬性添加到嵌套的對(duì)象上,下面這篇文章主要給大家介紹了關(guān)于vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11