如何在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", `max-age=${maxage} s-maxage=${maxage}`);
        }
    else {
        appendHeader(event, "Cache-Control",`max-age=${120} s-maxage=${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