vue cli3配置image-webpack-loader方式

 更新时间:2022年07月29日 11:49:58   作者:萝卜砸大坑  
这篇文章主要介绍了vue cli3配置image-webpack-loader方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue cli3配置image-webpack-loader

vue cli3配置image-webpack-loader对图片进行压缩优化

安装

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

配置vue.config.js

chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
  }

重启项目打包 ok

使用image-webpack-loader压缩图片报错

安装:请一定使用淘宝镜像cnpm安装,否则安装的包是不完整的

如果之前使用了npm安装,请先卸载再重新安装

$ cnpm install image-webpack-loader --save-dev

配置:vue.config.js

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

报了莫名其妙的错:

Error: ‘[项目目录]\node_modules\pngquant-bin\vendor\pngquant.exe’ �����ڲ����ⲿ���Ҳ���ǿ����еij���

解决方法:

卸载了再重新安装image-webpack-loader

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue使用watch监听一个对象中的属性的实现方法

    Vue使用watch监听一个对象中的属性的实现方法

    这篇文章主要介绍了Vue使用watch监听一个对象中的属性的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue父子组件传值不能实时更新的解决方法

    vue父子组件传值不能实时更新的解决方法

    Vue是一个以数据驱动、组件化的前端框架,其中组件化是Vue中较为重要的概念之一,组件之间的通信则成为Vue中较为普遍的需求,下面这篇文章主要给大家介绍了关于vue父子组件传值不能实时更新的解决方法,需要的朋友可以参考下
    2023-05-05
  • 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

    关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

    关于Vue.js 2.0 的 Vuex 2.0你需要更新的知识库,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue3+ts项目搭建的实现示例

    vue3+ts项目搭建的实现示例

    这篇文章主要介绍了vue3+ts项目搭建的实现示例,本文目的在于记录自己项目框架搭建的过程,通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • Vue CLI3中使用compass normalize的方法

    Vue CLI3中使用compass normalize的方法

    这篇文章主要介绍了Vue CLI3中使用compass normalize的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue 公共列表选择组件,引用Vant-UI的样式方式

    vue 公共列表选择组件,引用Vant-UI的样式方式

    这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现简单的计算器功能

    vue实现简单的计算器功能

    这篇文章主要为大家详细介绍了vue实现简单的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • VUEJS实战之构建基础并渲染出列表(1)

    VUEJS实战之构建基础并渲染出列表(1)

    这篇文章主要为大家详细介绍了VUEJS实战之构建基础并渲染出列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • vue中多个倒计时实现代码实例

    vue中多个倒计时实现代码实例

    这篇文章主要介绍了vue中多个倒计时实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue的插槽原来该这样理解

    vue的插槽原来该这样理解

    这篇文章主要为大家详细介绍了vue的插槽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02

最新评论