Nuxt中public目录缓存协商配置未生效问题求助

我想给根目录下的public文件夹实现缓存协商，已经在nuxt.config.ts中完成配置，但执行pnpm dev、pnpm generate命令后，用npx serve .vercel/output/static启动服务时，发现缓存并未生效——每次获取public目录下的资源，网络控制台都会显示有数据传输，求技术朋友帮忙解决。

我的nuxt.config.ts配置 #

import AutoImport from 'unplugin-auto-import/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
const env = import.meta.env.NODE_ENV;

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    'nuxtjs-naive-ui',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxt/eslint',
    '@nuxt/icon'
  ],
  app: {
    baseURL: '/',
    pageTransition: { name: 'page', mode: 'out-in' },
    head: {
      viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover',
      meta: [
        { name: 'format-detection', content: 'telephone=no' },
        { name: 'msapplication-tap-highlight', content: 'no' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'apple-touch-fullscreen', content: 'yes' },
        { name: 'theme-color', content: '#0f172a' },
        { name: 'msapplication-TileColor', content: '#0f172a' },
        { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
        { name: 'renderer', content: 'webkit' }
      ]
    }
  },
  router: {
    options: {
      hashMode: false
    }
  },
  devtools: { enabled: env === 'development' },
  css: [
    '~/assets/css/main.css',
    '~/assets/css/mobile.css'
  ],
  compatibilityDate: '2025-05-15',
  vite: {
    css: {
      devSourcemap: true
    },
    plugins: [
      AutoImport({
        imports: [
          {
            'naive-ui': [
              'useDialog',
              'useMessage',
              'useNotification',
              'useLoadingBar'
            ]
          }
        ]
      }),
      Components({
        resolvers: [NaiveUiResolver()]
      })
    ],
    ssr: {
      noExternal: ['naive-ui', 'vueuc', '@css-render/vue3-ssr']
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vue: ['vue', 'vue-router'],
            ui: ['naive-ui'],
            utils: ['@vueuse/core']
          }
        }
      },
      minify: 'terser',
      chunkSizeWarningLimit: 1000
    }
  },
  sourcemap: true,
  build: {
    transpile: ['naive-ui', 'vueuc', '@css-render/vue3-ssr']
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  },
  ssr: true,
  experimental: {
    payloadExtraction: false
  },
  nitro: {
    preset: 'vercel',
    publicAssets: [
      {
        baseURL: '/',
        dir: 'public',
        maxAge: 60 * 60 * 24 * 7
      }
    ],
    compressPublicAssets: {
      brotli: true,
      gzip: true
    }
  }
});

相关截图 #

• generate执行结果截图
• pnpm dev执行结果截图

问题分析与解决建议 #

1. 开发环境本身不支持缓存 #

pnpm dev是Nuxt的开发模式，为了实时更新代码、方便调试，默认会禁用所有缓存策略，所以开发环境下缓存不生效是正常现象，请只在pnpm generate构建后的生产产物中测试缓存。

2. npx serve工具不支持复杂缓存规则 #

npx serve是一个极简的静态文件服务器，默认不会处理Nuxt配置中定义的缓存头，也不支持协商缓存（ETag/Last-Modified）的逻辑。你可以替换为更专业的静态服务器，比如http-server：

# 全局安装http-server
npm install -g http-server
# 启动服务并设置7天缓存
http-server .vercel/output/static -c 604800

3. 完善Nuxt缓存配置 #

当前的nitro.publicAssets只设置了maxAge，缺少协商缓存相关的配置项，建议补充immutable和自定义Cache-Control头，同时启用ETag生成：

nitro: {
  preset: 'vercel',
  publicAssets: [
    {
      baseURL: '/',
      dir: 'public',
      maxAge: 60 * 60 * 24 * 7,
      immutable: true, // 标记资源不可变，浏览器无需重复验证
      headers: {
        'Cache-Control': 'public, max-age=604800, immutable',
        'ETag': true // 自动生成ETag用于协商缓存
      }
    }
  ],
  compressPublicAssets: {
    brotli: true,
    gzip: true
  }
}

4. 正确的缓存测试方式 #

• 不要用F5强制刷新页面（此时浏览器会发送Cache-Control: max-age=0强制重新请求），改用普通页面导航或点击链接测试。
• 在浏览器网络控制台中，查看资源的响应头是否包含Cache-Control、ETag字段：
  • 如果存在这些字段，说明缓存配置已生效；
  • 如果没有，说明Nuxt构建时未正确生成缓存头，需要检查nitro配置是否正确。

5. 直接在Vercel部署测试 #

你的Nuxt配置中preset: 'vercel'，Vercel平台会自动识别并应用Nuxt的缓存策略，建议直接部署到Vercel后测试缓存效果，这才是生产环境的真实场景。

内容的提问来源于stack exchange，提问作者shunpeng gao