vue-cli4.0 vue.config.js配置——圖片壓縮

1、安裝image-webpack-loader

npm install image-webpack-loader

2、在項目打包時報錯,所以先卸載然后使用cnpm進項安裝

npm uninstall  image-webpack-loader

使用cnpm進行安裝,親測成功

3、安裝 cnpm 然后將全局的 registry 設置成阿里的鏡像,國內阿里比較快

npm install cnpm -g --registry=https://registry.npm.taobao.org

4、cnpm 安裝 image-webpack-loader 會發(fā)現(xiàn)很快就安裝好了

npm install image-webpack-loader --save-dev  image-webpack-loader 

5、安裝好后,在Vue.config.js文件中進行配置

chainWebpack: config => {
    // 壓縮圖片
    if (IS_PROD) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        });
    }
  },


圖片壓縮完畢!

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容