Bagaimana untuk menambah kawalan cache dalam fail statik yang dijana (Nuxt 3)

Question

Saya menggunakan Nuxt 3 untuk mencipta projek SSR. Saya sedang berfikir untuk meletakkan fail statik yang dijana dalam direktori Cache-Control 标头添加到 .output/_nuxt.

Saya cuba kod di bawah 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}`);
})

Tetapi, ia tidak berkesan.

Bagaimana untuk menambah Cache-Control pada fail statik yang dijana?

Answer 1

Untuk Nuxt3, saya menggunakannya sebagai perisian tengah pelayan 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= s-maxage=`);
  }
});

Answer 2

Saya akan fikirkan sendiri. Menambah kod berikut pada nuxt.config.js akan menambahkan kawalan cache pada fail statik. Terima kasih atas sokongan anda!

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}` } },
    }
  }
})