在vue中使用image-webpack-loader實例

更新時間：2020年11月12日 11:01:47 作者：侯六六

這篇文章主要介紹了在vue中使用image-webpack-loader實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

首先打開 webpack.base.confi.js

提示：在這里url-loader 和 image-webpack-loader 不能一起使用，否則會導致圖片出不來

接著找到

 module: {
  rules: [
   {}...
  ]
}

在這里寫入，一定要先寫 ‘file-loader’ 才能使用 'image-webpack-loader’

有各種配置，可以調整你要壓縮后圖片的質量

提示：如果使用了 webp 會大大減少體積，但是ios并不支持這個格式，會導致在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
       // }
      }
     }
    ]
   },

補充知識：記一次vue-cli3中 mage-webpack-loader 圖片優(yōu)化時，亂碼報錯的問題

命令行 npm install --save-dev image-webpack-loader在開發(fā)環(huán)境中下載下來優(yōu)化包以后，在vue.config.js(vue-cli3配置文件)中使用如下

代碼: chainWebpack函數下

config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()

但是這樣在dev 以后

一堆亂碼的報錯

我同事在使用這個的時候，也出現(xiàn)了一系列無法找到 image-webpack-loader模塊這類的報錯

在查閱百度，論壇，有遇到這個問題的，但沒人解決的

后面看了一下，找到是包安裝的問題

后面npm uninstall image-webpack-loader 刪除了包

然后cnpm install --save-dev image-webpack-loader 鏡像下載解決的

流下了沒有技術的淚水~

以上這篇在vue中使用image-webpack-loader實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue elementUI select下拉框如何設置默認值
這篇文章主要介紹了vue elementUI select下拉框如何設置默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue將毫秒數轉化為正常日期格式的實例
今天小編就為大家分享一篇vue將毫秒數轉化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue2.0實現(xiàn)組件數據的雙向綁定問題
這篇文章主要介紹了Vue2.0實現(xiàn)組件數據的雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-03-03
VUE中的export default和export使用方法解析
export default和export都能導出一個模塊里面的常量，函數，文件，模塊等，在其它文件或模塊中通過import來導入常量，函數，文件或模塊。但是，在一個文件或模塊中export,import可以有多個，export default卻只能有一個。
2022-12-12
VUE實現(xiàn)大轉盤抽獎
營運三寶(九宮格、大轉盤、老虎機，當然此三寶當然是最基礎的營銷運營手段)，本片文章聊聊大轉盤，轉盤的實現(xiàn)邏輯應該是營銷方案較為簡單的一種了，本文將介紹如何實現(xiàn)大轉盤抽獎，感興趣的朋友可以參考下
2021-05-05
vue3項目新用戶引導組件driver.js示例詳解
好用的用戶引導插件有?intro.js?和?driver.js?兩個，對比了一下，最終還是使用了driver.js，這篇文章主要介紹了vue3項目新用戶引導組件(driver.js),需要的朋友可以參考下
2022-08-08
vue computed無法得到this的屬性或方法的解決
這篇文章主要介紹了vue computed無法得到this的屬性或方法的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue非父子組件之間的通信方式詳解
在實際業(yè)務中,除了父子組件通信外,還有很多非父子組件通信的場景,下面這篇文章主要給大家介紹了關于Vue非父子組件之間的通信方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
Vue數據驅動表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數據驅動表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07