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

商振
2023-12-01

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' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

    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 镜像下载解决的

 

 类似资料: