安装image-webpack-loader 后启动项目报错

error in .c/assets/img/t2.png

Module build failed: Error: ‘D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF\subsite\node_modules\pngquant-bin\vendor\pngquant.exe’ ڲ ⲿ Ҳ ǿ
еij
ļ
at notFoundError (D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF\subsite\node_modules\imagemin-pngquant\node_modules\cross-spawn\lib\enoent.js:6:26)

安装插件 imagemin-pngquant
npm install imagemin-gifsicle
npm install imagemin-mozjpeg
npm install iimagemin-optipng
npm install imagemin-pngquant
cnpm install pngquant-bin

安装image-webpack-loader 报错
命令:

//删除原来安装的image-webpack-loader
npm uninstall image-webpack-loader 
//从国内下载  --->缺点:每次删除插件时,都需要重新下载,最好用npm下载
cnpm install image-webpack-loader 

webpack.base.conf.js相关配置:

{// 对图片资源文件使用url-loader  
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use:[
           {
            loader: 'url-loader',
            options: {
              limit: 10000,// 小于10K的图片转成base64编码的dataURL字符串写到代码中
              fallback: 'file-loader',
              name: utils.assetsPath('img/[name].[hash:7].[ext]')// 其他的图片转移到静态资源文件夹
            }
           },          
           {
            loader: 'image-webpack-loader',// 压缩图片
            options: {
              mozjpeg: {//jpeg压缩
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {//png压缩
                enabled: false,
              },
              pngquant: {//png压缩
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {//gif压缩
                interlaced: false,
              } 
              // the webp option will enable WEBP
              //webp: {
              // quality: 75
              //}
            } 
          }
        ]
      } 

相关链接:
官方文档:https://www.npmjs.com/package/image-webpack-loader#libpng-issues
https://blog.csdn.net/stanxl/article/details/78639608?utm_source=blogxgwz16

你可能感兴趣的:(bug,vue,vue.js,webpack)