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

yas*_*a_t 5 vue.js nuxt.js vuejs3 nuxtjs3

我正在使用 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}`);
})
Run Code Online (Sandbox Code Playgroud)

但是,它不起作用。

在此输入图像描述

如何添加Cache-Control到生成的静态文件中?

yas*_*a_t 12

我自己弄清楚。添加以下代码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}` } },
    }
  }
})
Run Code Online (Sandbox Code Playgroud)