在vue中使用image-webpack-loader實(shí)例
首先打開 webpack.base.confi.js
提示：在這里url-loader 和 image-webpack-loader 不能一起使用，否則會導(dǎo)致圖片出不來
接著找到
module: {
rules: [
{}...
]
}在這里寫入，一定要先寫 ‘file-loader’ 才能使用 'image-webpack-loader’
有各種配置，可以調(diào)整你要壓縮后圖片的質(zhì)量
提示：如果使用了 webp 會大大減少體積，但是ios并不支持這個(gè)格式，會導(dǎo)致在ios上看不見圖片
{
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ǔ)充知識：記一次vue-cli3中 mage-webpack-loader 圖片優(yōu)化時(shí)，亂碼報(bào)錯(cuò)的問題
命令行 npm install --save-dev image-webpack-loader在開發(fā)環(huán)境中下載下來優(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)了一系列無法找到 image-webpack-loader模塊這類的報(bào)錯(cuò)
在查閱百度，論壇，有遇到這個(gè)問題的，但沒人解決的
后面看了一下，找到是包安裝的問題
后面npm uninstall image-webpack-loader 刪除了包
然后cnpm install --save-dev image-webpack-loader 鏡像下載解決的
流下了沒有技術(shù)的淚水~
以上這篇在vue中使用image-webpack-loader實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue elementUI select下拉框如何設(shè)置默認(rèn)值
這篇文章主要介紹了vue elementUI select下拉框如何設(shè)置默認(rèn)值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問題，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個(gè)模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。但是，在一個(gè)文件或模塊中export,import可以有多個(gè)，export default卻只能有一個(gè)。2022-12-12
VUE實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)
營運(yùn)三寶(九宮格、大轉(zhuǎn)盤、老虎機(jī)，當(dāng)然此三寶當(dāng)然是最基礎(chǔ)的營銷運(yùn)營手段)，本片文章聊聊大轉(zhuǎn)盤，轉(zhuǎn)盤的實(shí)現(xiàn)邏輯應(yīng)該是營銷方案較為簡單的一種了，本文將介紹如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)，感興趣的朋友可以參考下2021-05-05
vue3項(xiàng)目新用戶引導(dǎo)組件driver.js示例詳解
好用的用戶引導(dǎo)插件有?intro.js?和?driver.js?兩個(gè)，對比了一下，最終還是使用了driver.js，這篇文章主要介紹了vue3項(xiàng)目新用戶引導(dǎo)組件(driver.js),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue computed無法得到this的屬性或方法的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在實(shí)際業(yè)務(wù)中,除了父子組件通信外,還有很多非父子組件通信的場景,下面這篇文章主要給大家介紹了關(guān)于Vue非父子組件之間的通信方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07