如何让Vite PWA在开发与生产模式下预缓存行为一致？

Vite-PWA默认在开发模式下仅预缓存index.html和registerSW.js这类核心文件，目的是降低开发阶段的缓存开销，但如果要让它和生产模式一样预缓存所有资源，可以通过以下配置实现：

配置Workbox资源匹配规则 #

在你的VitePWA配置中，给workbox添加明确的globPatterns和globIgnores，让开发、生产模式共用一套资源匹配逻辑：

VitePWA({
  registerType: 'autoUpdate',
  injectRegister: 'auto',
  devOptions: {
    enabled: true,
    type: 'module',
  },
  workbox: {
    maximumFileSizeToCacheInBytes: 5000000,
    // 匹配所有需要预缓存的资源类型，可按需调整
    globPatterns: [
      '**/*.{html,js,css,ico,png,jpg,jpeg,svg,webp}'
    ],
    // 排除不需要预缓存的文件，根据项目情况修改
    globIgnores: [
      '**/node_modules/**/*',
      '**/sw.js',
      '**/workbox-*.js'
    ]
  },
}),

关键说明 #

• 开发模式下Vite会动态生成带hash后缀的资源，globPatterns的规则要覆盖这类动态文件，确保所有需要预缓存的资源都能被匹配到。
• 修改配置后重启yarn dev，查看dev-dist/sw.js中的precacheAndRoute数组，即可看到所有符合规则的资源都已加入预缓存清单，与生产模式的结构一致。

内容的提问来源于stack exchange，提问作者Léo Coco