图片不转为base64"/>

Vue 设置图片不转为base64

在使用 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，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号