vue cli4 阻止图片转base64

文章目录

• • 介绍
  • 功能
  • 步骤
  • • 在项目根目录中新建vue.config.js文件
  • vue.config.js文件内容

介绍

在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。

参考文献：vue.config.js配置参考

功能

1. 避免vue cli4图片转码

步骤

在项目根目录中新建vue.config.js文件

vue.config.js文件内容

var path = require('path');  //必须引入path 否则报错
module.exports = {
  chainWebpack: config => {
    //设置图片不转base64格式  图片少 且对图片质量要求高
    const imagesRule = config.module.rule('images');
  	imagesRule.uses.clear()        //清除原本的images loader配置
  	imagesRule
  	  .test(/\.(jpg|gif|png|svg)$/)
  	  .exclude
  	  .add(path.join(__dirname,"../node_modules"))   //去除node_modules里的图片转base64配置
  	  .end()
  	  .use('url-loader')
  	    .loader('url-loader')
  	    .options({name:"img/[name].[hash:8].[ext]",limit: 1})

  },

}