Vue框架设置图片不转为base64

最新推荐文章于 2024-05-06 16:45:45 发布

Martin-Luo

最新推荐文章于 2024-05-06 16:45:45 发布

阅读量618

点赞数

文章标签： vue.js 前端 webpack

本文链接：https://blog.csdn.net/Dragon_Luo/article/details/131577971

版权

在Vue框架开发中，vue-cli的webpack模板默认将10KB以下的图片转换为base64，以提高渲染速度。然而，这可能导致打包后的CSS和JS文件体积增大，特别是在图片数量多时问题突出。为解决此问题，可以通过修改vue.config.js文件，调整url-loader的limit选项来阻止图片转base64，例如设置limit为1。

摘要由CSDN通过智能技术生成

使用Vue框架开发项目时，vue-cli创建的webpack模板默认会将 10KB 以下的图片和字体文件转为base64

好处：带来了更快的渲染，不会因为页面切换时还有加载图片的延迟感.
坏处：打包后的CSS，JS文件非常大，特别是图片数量多的情况下，这个问题尤为明显.

修改vue.config.js文件

module.exports = {
  // 添加代码，让图片不转为beas64
  chainWebpack: config => {
      config.module
      	.rule('images')
      	.use('url-loader')
      	.loader('url-loader')
      	.tap(options => Object.assign(options, { limit: 1 }))
  	}
}