javascript - Vue - 为什么有些图像在生产中得到散列，而另一些则没有？

Question

我的一些图标有这个 CSS：

ul.grid-list li.input-grid-box input.input.consumption {
    background: url(../img/icons/icon-consumption.png) no-repeat scroll 3px 14px;
    background-size: 21px;
}
ul.grid-list li.input-grid-box input.input.workforce {
    background: url(../img/icons/icon-workforce.png) no-repeat scroll 3px 11px;
    background-size: 14px;
}
ul.grid-list li.input-grid-box input.input.time {
    background: url(../img/icons/icon-time.png) no-repeat scroll 3px 10px;
    background-size: 16px;
}
ul.grid-list li.input-grid-box input.input.rooms {
    background: url(../img/icons/icon-rooms.png) no-repeat scroll 3px 7px;
    background-size: 20px;
}

每次我构建项目并查看内部dist/assets/img时，只有一个图标 (icon-rooms) 有一个哈希 ( icon-rooms.575a049f.png)，而所有其他图标都在 /icons/ 文件夹中，没有这样的哈希。为什么是这样？

标签： javascriptcssvue.js

Answer 1

默认情况下，生成的静态资产在其文件名中包含哈希值，以便更好地控制缓存。

查看官方 vue.js 文档

不过，您可以禁用此功能。