编译后 dist 目录下多了一个 img 文件夹

Question

老师，我编译完后，dist目录下多了一个 img 文件夹，里面有俩文件，avatar.png 是我两个组件里用到的，都按就近维护原则跟组件放在同一个文件夹下了，还多了了个字体图标的svg文件，这是为什么呢？

另外，编译完成后跑的项目，这个avatar.png也请求不到，控制台报 GET http://localhost:9000/static/css/static/img/avatar.3ffb5d8.png 404 (Not Found) 这个错误。。。

Answer 1

ustbhuangyi 2018-08-21 15:12:50

因为 webpack 的配置，它会把图片编译到 dist 目录下的 img 目录里。最终要看一些你的请求地址和实际上你启动的服务代理的静态资源地址有没有匹配上。

• 提问者 德古拉的残魂 #1

  但是其他组件用到的图片没有出现在这里，老师在课上讲过图片会编译成base64编码编进js里呀，为啥avatar没有被编译呢，是跟图片文件本身大小有关么

• ustbhuangyi 回复 提问者 德古拉的残魂 #2

  看图片体积，如果超过 limit 的限制的话会变成单独的图片

• 提问者 德古拉的残魂 #3

  非常感谢！