静态资源打包assets和static的区别

静态资源打包assets和static的区别

在项目打包时发现，虽然默认static文件夹里面的内容不会被打包，但是static中的图片文件，如果是通过相对路径引入到css样式中，那么在最终打包时，在css文件中发现，其仍然会被转换成base64的图片文件数据，在这种情况下，即使替换打包文件中的static文件的图片，也不会真的替换程序中的图片。而如果采用绝对路径的形式引入到css样式中，则不会被处理成base64。
因此，webpack默认将static目录的文件原原本本输出，所以当页面要使用绝对路径时，图片就需要放在static目录。如果用了相对路径，图片仍然放在static，static目录的图片被打包出来也没有多大意义，删了也不会影响图片展示。

所以一般assets目录存相对路径用的图片，static存绝对路径用的图片。相对目录的图片在出包后由于被打包进js，不方便更换图片，而绝对路径的图片没有被打包进js而是在static文件夹下，所以可以随时更换。就是网上所说的，static放有可能经常被更换的图片（商品图片之类），assets放组件使用的图片（如一些menu的背景图片等）。

**即需要打包成base64的放入assets目录下，不需要的放入static。同时注意，图片处理成base64后不需要进行图片请求，可以有效减少浏览器请求，但处理成base64文件不宜过大.

参考：https://blog.csdn.net/weixin_40012136/article/details/77992125