Nuxt3部署Firebase Hosting后文件版本与缓存问题解决方案咨询

方案1：Firebase Hosting 保留旧版本文件 #

Firebase Hosting默认部署会覆盖并删除旧文件，你可以通过配置保留历史静态资源：

• 修改firebase.json，开启版本保留并设置静态资源缓存策略：

  {
    "hosting": {
      "public": ".output/public",
      "cleanUrls": true,
      "headers": [
        {
          "source": "**/*.{js,css}",
          "headers": [{"key": "Cache-Control", "value": "public, max-age=31536000, immutable"}]
        }
      ],
      "versions": {
        "retain": 5 // 保留最近5个版本的文件
      }
    }
  }
  

  部署新版本后，旧版本的带哈希JS文件会被保留一段时间，旧会话的客户端仍能正常访问。

方案2：Nuxt3 客户端版本检测自动刷新 #

在Nuxt3中添加版本检测逻辑，让客户端感知更新并主动刷新，避免访问失效资源：

1. 每次构建时生成version.json文件（基于Git commit hash），可在package.json的build脚本中添加自动生成命令：

   "scripts": {
     "build": "node -e \"require('fs').writeFileSync('./version.json', JSON.stringify({version: require('child_process').execSync('git rev-parse --short HEAD').toString().trim()}))\" && nuxt build"
   }
   

2. 在app.vue中添加版本检测逻辑：

   <script setup>
   import { onMounted, onBeforeRouteUpdate } from 'vue'
   
   const checkVersion = async () => {
     try {
       const res = await fetch('/version.json')
       const { version: serverVersion } = await res.json()
       const clientVersion = import.meta.env.VITE_APP_VERSION
       if (serverVersion !== clientVersion) {
         if (confirm('站点已更新，请刷新页面获取最新内容')) {
           window.location.reload(true)
         }
       }
     } catch (e) {
       console.error('版本检测失败', e)
     }
   }
   
   onMounted(() => {
     checkVersion()
     setInterval(checkVersion, 300000) // 每5分钟检测一次
   })
   
   onBeforeRouteUpdate(() => {
     checkVersion()
   })
   </script>
   

3. 在nuxt.config.ts中注入客户端版本号：

   export default defineNuxtConfig({
     vite: {
       define: {
         'import.meta.env.VITE_APP_VERSION': JSON.stringify(require('child_process').execSync('git rev-parse --short HEAD').toString().trim())
       }
     }
   })
   

   旧版本用户浏览时会收到更新提示，刷新后即可使用新版本资源。

方案3：静态资源托管到Firebase Cloud Storage #

将Nuxt生成的带哈希静态资源上传到Cloud Storage，配置Hosting从Storage读取资源：

1. 构建Nuxt项目后，将.output/public/_nuxt目录下的所有文件上传到Cloud Storage的指定存储桶（如your-bucket/static）。
2. 在firebase.json中配置重写规则：

   {
     "hosting": {
       "public": ".output/public",
       "rewrites": [
         {
           "source": "/_nuxt/**",
           "destination": "https://storage.googleapis.com/your-bucket/static/**"
         }
       ]
     }
   }
   

   这种方式下旧版本资源不会被删除，新资源上传后旧资源仍可访问，旧会话客户端不会出现加载失败。

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