vuecli 自动转换小文件为 base64 格式,如何关闭?
1. 问题
最近在写 vue 项目时,发现稍微小一点的静态资源,例如字体文件, 图片都被自动转换为 base64 格式了。
在网上搜索时基本都是去配置 url-loader ,配置后提示:Can't resolve 'url-loader'。看了依赖文件中并没有 url-loader 这个库。
2.原因
目前最新的 vue-cli 版本是基于 webpack5 的,在 webpack4 的时候是用 url-loader 等 loader 来处理静态资源,5 则是用 asset 模块(asset module)来处理的,
3.解决办法
如果不需要自动转换为 base64 格式,可以使用以下配置,调整转换生效的最大文件大小,这里设置的是 4kb(默认应该是 8kb)
module.exports = {
//...
module: {
rules: [
{
//...
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
},
],
},
};
详情可以看 webpack5 文档里的解释:https://webpack.docschina.org/guides/asset-modules/#general-asset-type
如今这里荒草丛生没有了鲜花,好在曾今拥有你们的春秋和冬夏。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战