在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 图片优化时，乱码报错的问题

命令行 npm install --save-dev image-webpack-loader在开发环境中下载下来优化包以后，在vue.config.js(vue-cli3配置文件)中使用如下

代码: chainWebpack函数下

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

但是这样在dev 以后

一堆乱码的报错

我同事在使用这个的时候，也出现了一系列无法找到 image-webpack-loader模块这类的报错

在查阅百度，论坛，有遇到这个问题的，但没人解决的

后面看了一下，找到是包安装的问题，npm下载下来的时候因为翻墙的问题，包下载的不完全

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

然后cnpm install --save-dev image-webpack-loader 镜像下载解决的

流下了没有技术的泪水~

以上这篇在vue中使用image-webpack-loader实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Webpack的Loader和Plugin的区别

    Loader 用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为data URL.比如说:CSS-Loader,Style-Loader等. loader的使用很简单: 在webpack.config.js中指定loader.module.rules可以指定多个loader,对项目中的各个loader有个全局概览. lo

  • Vue CLI4 Vue.config.js标准配置(最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression

  • 解决vue-loader加载不上的问题

    前言: webpack 整合vue 的时候,遇到了一个大坑,找了好多资料才弄好 我们知道 webpack - - -默认 无法解析 .vue 为后缀的文件,所以webpack需要下载一个解析 .vue 文件的 loader 下载 vue-loader 的方法有许多 ,我是 使用 vue-loader 是要依赖 vue 的,所以先下载 vue npm i vue -S cnpm i vue-loader vue-template-compiler -D webpack.config.js 中配置相

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • 在vue中阻止浏览器后退的实例

    如下所示: history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同,同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue 中固定导航栏的实例代码

    点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () {

  • vue中setup语法糖写法实例

    目录 变量声明 父传子 子传父 变量声明 变量声明定义的时候,不需要返回可以直接使用即可 没有使用setup语法糖时写法 <script> import {useStore} from 'vuex' export default { setup() { const store=useStore() const plus=()=>{ store.commit('plus') } return {plus} }, } </script> 使用setup语法糖写法 <scri

  • Vue中的$set的使用实例代码

    Vue -$set 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.studen

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

随机推荐