问答

vue打包npm run build打包图片发生error出错

作者:admin 2021-04-22 我要评论

这是一个vue项目的打包,npm run build后如下错误,截图这仅仅是众多错误中的一个错误,其他错误都是类似的。我把他完整地复制下来了,试了很多方法,比如修改sr...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image
这是一个vue项目的打包,npm run build后如下错误,截图这仅仅是众多错误中的一个错误,其他错误都是类似的。我把他完整地复制下来了,试了很多方法,比如修改src为如下代码还是不行
image

ERROR Failed to compile with 14 errors error in ./src/assets/pic_8.png

Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: 'E:\ \H5convert\H5convert-weicheng\node_modules\pngquant-bin\vendor\pngquant.exe' ? ? ?? ? е?

     ?   
at notFoundError (E:\其他工作\H5convert\H5convert-weicheng\node_modules\imagemin-pngquant\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (E:\其他工作\H5convert\H5convert-weicheng\node_modules\imagemin-pngquant\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (E:\其他工作\H5convert\H5convert-weicheng\node_modules\imagemin-pngquant\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)

@ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"eb53340a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Convert_weicheng.vue?vue&type=template&id=b6659c2c&scoped=true& 7:1984-2021
@ ./src/views/Convert_weicheng.vue?vue&type=template&id=b6659c2c&scoped=true&
@ ./src/views/Convert_weicheng.vue
@ ./src/router.js
@ ./src/main.js
@ multi ./src/main.js

求大佬能解析一下,谢谢

###

你这个应该是图片压缩的时候出错的
关闭360腾讯电脑管家等软件
重新执行一下
要用cnpm 因为npm下载不下了
npm remove image-webpack-loader
cnpm install --save-dev image-webpack-loader

然后在 npm run build

###

配置一下路径别名试试还报错不:

vue.config.js

configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },

html:

<img src="@/assets/pic.png" alt="">
###

想问一下具体怎么操作的?

###

vue中使用要先require加载,同步方法。
在data中定义变量:

data() {
    return {
        pic1:require(@/assets/pic_1.png),
        pic2:require(@/assets/pic_2.png),
    }

}

在html中调用:

<img :url="pic1" alt="">

这样就不会存在图片找不到的问题

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue打包npm run build打包图片发生erro

    vue打包npm run build打包图片发生erro

  • linux 脚本 一个

    linux 脚本 一个

  • 在electron-vue中使用puppeteer await

    在electron-vue中使用puppeteer await

  • linux 脚本运行报错 无法找到字符串

    linux 脚本运行报错 无法找到字符串

腾讯云代理商
海外云服务器