vue中动态引入图片为什么要是require, 你不知道的那些事( 三 )

先别急着喷,实际上造成这种差异的原因,是因为我改了一下webpack中的配置 。接下来涉及少量webpack代码,不了解webpack的小伙伴也没关系,了解原理即可 。
在上文中的我们提到,vue项目最终会被打包成一个dist目录,那么是什么帮我们完成这个打包的呢,没错,就是webpack 。在vue项目中的引入一张图片的时候,细心的同学会发现,有的时候,浏览器上显示图片地址是一个base64,有的时候,是一个被编译过后的文件地址 。也就是上述描述的差异 。
之所以会造成这种差异,是webpack打包的时候,对图片资源进行了相关的配置 。我们可以通过如下命令生成vue项目中的webpack配置文件,进行验证:

经验总结扩展阅读