Vue-cli3.0中 使用image-webpack-loader 做图片优化时,乱码报错解决办法
1.Vue-lie3.0中image-webpack-loader插件的使用方法做H5活动页面的时候,使用到了很多图片,就像使用image-webpack-loader插件来做图片优化,vue-lie3.0中image-webpack-loader插件的使用方法如下:(1)安装image-webpack-loadernpm install image-webpack-loader --save -
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 镜像下载解决的
更多推荐
所有评论(0)