Vue-cli3.0中使用image-webpack-loader 做图片优化时，乱码报错解决办法

我不是女神ヾ 2023-02-14 10:27 6阅读 0赞

### 1.Vue-lie3.0中image-webpack-loader插件的使用方法 ###

做H5活动页面的时候，使用到了很多图片，就像使用image-webpack-loader插件来做图片优化，vue-lie3.0中image-webpack-loader插件的使用方法如下：

（1）安装image-webpack-loader

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

(2)修改vue.config.js

// vue.config.js
    
    config.module.rules.push({
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use:[{
            loader: 'image-webpack-loader'
            options: {bypassOnDebug: true}
        }]
    })

以上两步操作完后才能之后，这个插件理论上来说就能使用了，但是运行项目发现控制太报了很多错

Module build failed (from ./node\_modules/image-webpack-loader/index.js):  
Error: 'D:\\work\\xiangmu\\xian-metro-front\\node\_modules\\pngquant-bin\\vendor\\pngquant.exe' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���  
���������ļ���

at notFoundError (D:\\work\\xiangmu\\xian-metro-front\\node\_modules\\cross-spawn\\lib\\enoent.js:6:26)  
    at verifyENOENT (D:\\work\\xiangmu\\xian-metro-front\\node\_modules\\cross-spawn\\lib\\enoent.js:40:16)  
    at ChildProcess.cp.emit (D:\\work\\xiangmu\\xian-metro-front\\node\_modules\\cross-spawn\\lib\\enoent.js:27:25)  
    at Process.ChildProcess.\_handle.onexit (internal/child\_process.js:248:12)

@ ./node\_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node\_modules/vue-loader/lib/loaders/stylePostLoader.js!./node\_modules/postcss-loader/src??ref--10-oneOf-1-2!./node\_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node\_modules/cache-loader/dist/cjs.js??ref--0-0!./node\_modules/vue-loader/lib??vue-loader-options!./src/views/credit-card/credit-card-applying.vue?vue&type=style&index=0&id=a143e83c&scoped=true&lang=less& 8:36-82  
 @ ./node\_modules/vue-style-loader??ref--10-oneOf-1-0!./node\_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node\_modules/vue-loader/lib/loaders/stylePostLoader.js!./node\_modules/postcss-loader/src??ref--10-oneOf-1-2!./node\_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node\_modules/cache-loader/dist/cjs.js??ref--0-0!./node\_modules/vue-loader/lib??vue-loader-options!./src/views/credit-card/credit-card-applying.vue?vue&type=style&index=0&id=a143e83c&scoped=true&lang=less&  
 @ ./src/views/credit-card/credit-card-applying.vue?vue&type=style&index=0&id=a143e83c&scoped=true&lang=less&  
 @ ./src/views/credit-card/credit-card-applying.vue  
 @ ./src/router/index.js  
 @ ./src/main.js  
 @ multi (webpack)-dev-server/client?http://10.160.1.159:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

在查阅百度，论坛之后，我发现有很多遇到这个问题的，但没人解决的

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

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

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