Vue中使用Workbox如何禁止特定动态路由被Service Worker缓存？

我来帮你捋捋这个问题——你要禁止带动态参数的/emailValidate这类路由被Service Worker缓存，现有的配置没生效，主要是几个地方没踩对点子：

先说说你现有配置的问题 #

• globIgnores是用来忽略预缓存的静态资源的（比如打包后的JS/CSS文件），但你的/emailValidate是动态请求（带随机ID和参数），属于运行时的导航或API请求，所以这个配置对它完全没用。
• runtimeCaching里用NetworkFirst策略其实还是会缓存响应（只是优先用网络请求，网络失败才 fallback 到缓存），这不是你要的「完全不缓存」效果。
• navigateFallbackBlacklist需要的是正则表达式数组，你传的是字符串，而且没匹配到所有子路径（比如/emailValidate/1231231这种带ID的），所以导航回退的黑名单没生效。

正确的配置方案 #

下面是调整后的完整配置，分两部分处理导航请求和API请求，再加上自定义SW的双重保险：

1. 修改vue.config.js配置

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: './src/sw.js',
      swDest: 'service-worker.js',
      // 这里的globIgnores可以删掉，因为它管不到动态请求
    },
    runtimeCaching: [
      {
        // 匹配所有以/emailValidate开头的API请求（含带参数/ID的子路径）
        urlPattern: new RegExp('^https://someurl.com/emailValidate(/.*)?'),
        // 完全走网络，不缓存任何响应
        handler: 'NetworkOnly',
      },
      {
        urlPattern: new RegExp('^https://someurl.com/passwordReset(/.*)?'),
        handler: 'NetworkOnly'
      }
    ],
    // 导航请求黑名单：用正则匹配所有目标路径的子路由
    navigateFallbackBlacklist: [
      /^\/emailValidate(/.*)?/,
      /^\/passwordReset(/.*)?/
    ]
  }
};

2. 在自定义sw.js里添加双重保险

因为你用的是InjectManifest模式，可以在自定义的Service Worker文件里直接监听fetch事件，确保这些请求完全绕过缓存：

// src/sw.js
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  // 检查请求路径是否匹配目标路由
  if (url.pathname.startsWith('/emailValidate') || url.pathname.startsWith('/passwordReset')) {
    // 直接发起网络请求，不经过任何缓存逻辑
    event.respondWith(fetch(event.request));
    return;
  }
  // 其他请求继续走workbox的默认处理逻辑
});

为什么这样有效？ #

• navigateFallbackBlacklist用正则匹配所有目标路径的导航请求，让Service Worker不对这些请求使用回退页面（比如index.html），直接交给浏览器原生处理，避免缓存导航内容。
• runtimeCaching里的NetworkOnly策略，确保所有匹配的API请求完全走网络，不会被存入Service Worker的缓存存储。
• 自定义的fetch事件监听是双重保险，即使其他配置有遗漏，也能强制这些请求不碰缓存。

最后注意 #

修改配置后，记得在浏览器里强制刷新（Ctrl+Shift+R）或者等待Service Worker更新，旧的SW缓存不会自动失效哦。

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