如何解决Nuxt静态图片浏览器缓存不更新的问题？

这是浏览器静态资源强缓存的通用表现：只要资源URL完全一致，浏览器会优先使用本地缓存的资源，不会主动向服务端校验资源是否更新。针对Nuxt项目有以下几种落地可用的方案：

方案1：将图片移入assets目录（最简便，优先推荐） #

Nuxt 2/3 对assets目录下的静态资源默认开启构建哈希处理：构建阶段会根据文件内容自动生成唯一哈希值追加到文件名尾部，例如logo.png会被编译为logo.2f4d9a.png。只要图片内容发生变更，哈希值就会同步更新，URL随之变化，自然不会出现缓存旧资源的问题。
使用示例：

<template>
  <!-- 直接引入assets目录下的图片即可，构建时会自动处理 -->
  <img src="~/assets/images/logo.png" alt="logo">
</template>

方案2：为static/public目录图片追加内容/时间戳后缀 #

如果你的图片必须放在静态资源目录（Nuxt2为static，Nuxt3为public，资源直接暴露在根路径下），可以通过追加查询参数的方式区分版本：

• 推荐基于文件内容哈希或者文件修改时间生成后缀，只有内容变更时后缀才会更新，不影响未修改图片的缓存
• 禁止使用随机数作为后缀，会导致所有图片每次加载都无法命中缓存，严重影响性能

你可以通过Nuxt构建钩子自动生成后缀映射，也可以封装全局图片组件统一处理：

// 示例：Nuxt3 全局图片组件 components/AppImg.vue
<script setup lang="ts">
const props = defineProps<{
  src: string
  alt: string
}>()
// 提前在构建阶段生成的静态资源修改时间映射表，也可以自行替换为内容哈希映射
const imgTimeMap = {
  '/images/logo.png': 1698723456,
  '/images/banner.png': 1698123456
}
const finalSrc = imgTimeMap[props.src] ? `${props.src}?v=${imgTimeMap[props.src]}` : props.src
</script>
<template>
  <img :src="finalSrc" :alt="alt">
</template>

使用时直接调用组件即可：

<AppImg src="/images/logo.png" alt="logo" />

方案3：配置服务端缓存校验策略 #

如果不想修改业务代码，也可以调整静态资源的响应头，让浏览器每次都主动校验资源是否更新：

1. 给图片资源的响应头设置Cache-Control: no-cache
2. 此时浏览器不会直接使用本地缓存，会先发送请求到服务端校验资源ETag/Last-Modified是否变更
3. 资源未变更时服务端返回304，浏览器继续使用本地缓存；资源变更时返回200和新资源，平衡缓存效率和更新及时性

Nginx 配置示例：

location ~* \.(png|jpg|jpeg|gif|webp)$ {
  root /path/to/your/nuxt/public;
  add_header Cache-Control "public, no-cache";
  expires 1y;
}

内容的提问来源于stack exchange，提问作者vciloglu