如何在nuxt 3中为静态文件添加文件缓存策略？

Question

在 nuxt 3 中我有这个代码：

export default defineEventHandler(async (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|woff)/) ? 60 * 60 * 24 * 30 : 60 * 60; appendHeader(event, "Cache-Control", 

最大年龄=${最大年龄} s-最大年龄=${最大年龄}

); } else { appendHeader(event, "Cache-Control",

最大年龄=${120} s-最大年龄=${120}

); } })

它可以工作，但只有图像在其标头中获取缓存策略 [css，js，woff] 文件，未设置任何内容

我在 nuxt.config 中尝试这个

routeRules: { "/img/**": { headers: { 'cache-control': 

public,max-age=${year},s-maxage=${year}

} }, "/_nuxt/**": { headers: { 'cache-control':

public,max-age=${year},s-maxage=${year}

} }, }

但它不起作用

Answer 1

可以使用nginx配置来实现这个需求

server {

    # for specific suffix
    location ~* \.(jpg|jpeg|gif|png|ico|svg|css|js|mjs|woff)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # for specific routes
    location ~ ^/(img|_nuxt)/ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

更改后不要忘记重新加载nginx

sudo nginx -s reload