當(dāng)我們?cè)谑褂肰ue進(jìn)行開發(fā)時(shí)，經(jīng)常會(huì)遇到這樣的情況：我們修改了圖片，但是在項(xiàng)目中卻不能及時(shí)刷新顯示出來。這是因?yàn)闉g覽器會(huì)緩存圖片，導(dǎo)致我們看到的是舊的圖片。為了解決這個(gè)問題，我們需要關(guān)閉圖片緩存。

Vue默認(rèn)情況下會(huì)開啟圖片緩存，使用的是瀏覽器緩存機(jī)制。如果我們需要關(guān)閉圖片緩存，可以通過設(shè)置webpack的文件名后綴來實(shí)現(xiàn)。具體做法如下：

// webpack.base.conf.js
module.exports = {
// ...
output: {
// ...
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].js'
}
}

在webpack.base.conf.js文件中，我們可以看到輸出filename和chunkFilename兩個(gè)屬性。我們只需要在這兩個(gè)屬性后添加[hash]，就可以在每次編譯時(shí)給文件名添加hash值。這樣，當(dāng)文件內(nèi)容發(fā)生改變時(shí)，其hash值也會(huì)改變，從而讓瀏覽器重新加載該文件。

需要注意的是，如果我們對(duì)圖片進(jìn)行了修改，則需要重新打包整個(gè)項(xiàng)目以生成新增圖片的hash值。如果我們只是修改了css或js文件，則可以使用webpack-dev-server進(jìn)行熱加載，不需要重新打包整個(gè)項(xiàng)目。

除了修改webpack的文件名后綴，還有一種方法可以關(guān)閉圖片緩存，那就是在圖片的URL后面添加一個(gè)隨機(jī)數(shù)。這樣可以避免后綴名變化的問題，但是需要手動(dòng)添加隨機(jī)數(shù)，比較麻煩。

在使用圖片時(shí)，我們可以在圖片URL后加上一個(gè)隨機(jī)數(shù)。這個(gè)隨機(jī)數(shù)可以使用Math.random()生成，每次不同的值都可以實(shí)現(xiàn)圖片緩存的關(guān)閉。

以上兩種方法都可以關(guān)閉圖片緩存，具體使用哪種方法可以根據(jù)項(xiàng)目需求自行選擇。在工程化的開發(fā)中，我們通常是使用 webpack 的更改后綴名的方式來實(shí)現(xiàn)靜態(tài)資源的版本控制和長(zhǎng)時(shí)間緩存。而如果只是臨時(shí)關(guān)閉圖片緩存的話，可以采用添加隨機(jī)數(shù)的方式曲線救國(guó)。