npm 发布包时 图片打包在新的项目引入不显示 路径错误解决方案


使用的是vue-cli 4.0以上脚手架 vue2.6 封装好组件后 npm publish ,在其他项目引入该组件库 图片显示失败 打开F12时看到 组件库里图片是/img/图片名,可是该项目没有此路径 

第一反应是把图片转成base64位打包,为何引用之后还是路径 原来默认10kb以后的图片不会转成base64位 所有修改打包配置 在vue.config.js 中添加

chainWebpack 这个属性下填加
  chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 30000000 })) 
//限制大小
}
2.把图片转成svg 在vue文件里加入svg 标签 (性能比转base64好一些)
附上在线转化工具https://www.aconvert.com/cn/image/png-to-svg/


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM