Vite PWA 在 Vercel 部署中的缓存问题解决方案

2025-06-22 08:33:41作者：温艾琴Wonderful

立即加速 GitHub 操作，探索 vite-plugin-pwa 的神奇世界！它是 Vite 的强大插件，提供零配置的 PWA 支持，内置服务 worker，确保离线可用性。借助类型安全的 TypeScript 和全面的框架集成（如 Vue 3、React 等），让您的应用焕发新生。一键生成所有 PWA 资产，无缝更新内容，开发过程轻松无忧。升级您的 Vite 项目，安装 vite-plugin-pwa，开启高性能 PWA 之旅！

项目地址：https://gitcode.com/gh_mirrors/vit/vite-plugin-pwa

在使用 Vite PWA 插件开发渐进式 Web 应用时，许多开发者在 Vercel 平台上部署时会遇到一个常见的缓存问题：每次新版本部署后，浏览器仍然加载旧版本的 index.html 和资源文件，导致 MIME 类型错误或 404 错误。本文将深入分析这一问题的成因，并提供完整的解决方案。

问题现象分析

当开发者在 Vercel 上部署 Vite PWA 应用的新版本时，用户浏览器可能会出现以下两种典型错误：

MIME 类型错误：浏览器控制台显示"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'text/html'"错误
资源加载失败：某些资源文件返回 404 状态码

这些问题的根本原因是浏览器缓存机制与 Service Worker 更新机制之间的冲突。Vercel 默认会对静态资源进行缓存优化，而 PWA 的 Service Worker 也会缓存资源，两者叠加导致了版本更新时的资源不一致问题。

解决方案详解

要彻底解决这个问题，需要在 Vercel 部署配置中正确设置缓存控制头。以下是经过验证的有效配置方案：

vercel.json 配置

{
  "headers": [
    {
      "source": "/(.*).html",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-store"
        }
      ]
    },
    {
      "source": "/sw.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/manifest.webmanifest",
      "headers": [
        {
          "key": "Content-Type",
          "value": "application/manifest+json"
        }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}