Nuxt3如何为自动生成的静态文件添加Cache-Control头？

在Nuxt3中，由于底层基于Nitro引擎，配置静态资源缓存的方式和Nuxt2有所不同，需根据部署模式选择对应方案：

1. 静态生成（SSG，nuxt generate）场景 #

通过Nuxt配置中的nitro.publicAssets字段，可为自动生成的静态资源（包括_nuxt目录下的编译产物、public目录下的文件）设置缓存规则：

export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      // 配置public目录下的静态资源缓存
      {
        baseURL: '/',
        dir: 'public',
        maxAge: '1y'
      },
      // 配置Nuxt自动生成的_nuxt目录资源缓存
      {
        baseURL: '/_nuxt/',
        dir: '.nuxt/dist/client',
        maxAge: '1y'
      }
    ]
  }
})

maxAge参数支持1y（1年）、30d（30天）这类可读性格式，最终会转换为对应秒数并生成Cache-Control响应头。

2. SSR/混合部署（nuxt build/nuxt dev）场景 #

若项目运行在SSR或混合模式下，可通过routeRules字段为特定路径的资源设置缓存头：

export default defineNuxtConfig({
  routeRules: {
    // 匹配Nuxt自动生成的所有资源
    '/_nuxt/**': { headers: { 'Cache-Control': 'max-age=31536000, immutable' } },
    // 匹配所有图片资源
    '/**/*.{png,jpg,jpeg,gif,svg,ico}': { headers: { 'Cache-Control': 'max-age=31536000, immutable' } },
    // 匹配所有JS/CSS资源
    '/**/*.{js,css}': { headers: { 'Cache-Control': 'max-age=31536000, immutable' } }
  }
})

immutable标记会告知浏览器该资源不会被修改，无需再次验证缓存，可进一步优化缓存效率。

注意：若使用第三方托管平台（如Vercel、Netlify）部署静态站点，平台可能自带缓存配置，建议同时检查平台设置以确保规则生效。

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