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

【问题标题】：Vue - Why are some images getting a hash in production and others not?Vue - 为什么有些图像在生产中得到散列，而另一些则没有？
【发布时间】：2020-03-29 15:00:44
【问题描述】：

我的一些图标有这个 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/ 文件夹中，没有这样的哈希。这是为什么呢？

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

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

See official vue.js documentation

你可以禁用它。

【讨论】：

我明白了。但问题是：为什么只有一个图标有散列，而不是所有图标都使用相同的方式？
坦率地说，我没有这个问题的答案。但我认为这与图像大小和一些图像元数据有关。在构建静态项目时，Vue 将检查缓存是否会提高每个文件的速度，如果是，则仅重命名它们。