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/