Vue 设置图片不转为base64
在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感。坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显。修改文件:/build/webpack.base.conf.js修改方式,如下图所示位置,将图片和字体的li...
·
在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。
好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感。
坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显。
vue-cli 3 、vue-cli 4 版本:
修改文件:vue.config.js
源码如下
module.exports = {
// ...
/* 调整内联文件的大小限制,让小图片不转为base64 */
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 1 }))
},
// ...
}
vue-cli 2 版本:
修改文件:/build/webpack.base.conf.js
修改方式,如下图所示位置,将图片和字体的 limit(限制)修改为:1(0貌似无效),修改后文件都不会再被转为base64格式了。
作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com
公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号
更多推荐
已为社区贡献10条内容
所有评论(0)