场景
对于已经打包上线的软件,需要切换不同公司的logo图片,这时就需要通过修改dist文件夹下的img图片即可
分析
vue打包的时候一般会携带一个静态资源的文件夹static,我们可以直接查看并修改里面静态资源、图片
问题
发现static-》img下的图片只有一部分,还有一些应用的没有显示
解决
vue-cli3打包的时候,对图片打包进行了优化,默认小于10KB的图片(比如png,注意svg不会)转为base64。
base64就是一串字符串码来表示的图片,在加载页面或者js的时候就一并加载过来,减少图片引用时单独的一次http请求,从而优化http请求,保证页面加速渲染。
设置自己图片打包的限制 vue.config.js文件中添加限制 .tap(options => Object.assign(options, { limit: 2500 }))
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign(options, { limit: 2048 })) //超过2500kb的不打包
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
},
拓展
file-loader 使用file-loader打包之后会把对应规则的文件,复制一份到打包之后的文件夹,生成新的文件名,并传给项目的输入文件使用。即返回的是图片的url
url-loader 可以将文件转化为base64,减少这些文件的http请求;但是如果这个图片特比大,那么生成的js文件也会特别的大,那么就会增加加载js的时间; 可以通过limit属性对图片分情况处理,当图片小于limit(单位:byte)大小时转base64,大于limit时调用file-loader对图片进行处理。
参考: