Vue项目打包后图片不显示 设置图片不转为base64

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

好处：带来了更快的渲染，不会因为页面切换时还有加载图片的延迟感。

坏处：打包后的CSS，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})

  },
}

这样打包后的图片就不会再转成base64格式的了，也可以正常显示了。