Nuxt 3 如何为生成的静态文件添加缓存控制

Question

我正在使用 Nuxt 3 创建 SSR 项目。 我正在考虑将

Cache-Control

标头添加到

.output/_nuxt

目录中生成的静态文件。

我试过下面的代码

server/middleware/cache-control.ts

export default defineEventHandler((event) => {
  let res = event.res
  const year = 31536000
  const tenmin = 600
  const url = event.req.url
  const maxage = url.match(/(.+)\.(jpg|jpeg|gif|css|png|js|ico|svg|mjs)/) ? year : tenmin
  res.setHeader('Cache-Control', `max-age=${maxage} s-maxage=${maxage}`);
})

但是，它不起作用。

生成的静态文件如何添加

Cache-Control

？

Answer 1

尝试使用h3函数：

appendHeader(res, name, value)

Nuxt 3 基于：https://github.com/unjs/h3

Answer 2

Nuxt 3

在插件路径中使用 Nuxt 3 钩子

plugins/cache.server.ts

：

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:rendered', ctx => {
        ctx.ssrContext?.event.node.res.setHeader('cache-control', `max-age=${60*60*24*365}`)
    })
})

在服务器路径中使用 Nitro hook

server/plugins/cache.ts

:

import { RenderResponse } from "nitropack"

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:response', (res: RenderResponse) => {
        res.headers['cache-control'] = `max-age=${60*60*24*365}`
    })
})

Answer 3

对于 Nuxt3，我将其用作服务器中间件

server/middleware/cache-control.js

export default defineEventHandler((event) => {
  if (process.env.NODE_ENV == "production") {
    const url = event.node.req.url;
    const maxage = url.match(/(.+)\.(jpg|jpeg|gif|png|ico|svg|css|js|mjs)/)
      ? 60 * 60 * 12 * 30
      : 60 * 60;
    appendHeader(
      event,
      "Cache-Control",
      `max-age=${maxage} s-maxage=${maxage}`
    );
  } else {
    appendHeader(event, "Cache-Control", `max-age=${60} s-maxage=${60}`);
  }
});

Answer 4

我自己想办法。将以下代码添加到

nuxt.config.js

会将缓存控制附加到您的静态文件。感谢您的支持！

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      "/img/**": { headers: { 'cache-control': `public,max-age=${year},s-maxage=${year}` } },
      "/_nuxt/**": { headers: { 'cache-control': `public,max-age=${year},s-maxage=${year}` } },
    }
  }
})