使用@vite-pwa/nuxt时Nuxt 3动态路由无法访问的问题咨询

问题描述 #

我使用Nuxt 3.7.0，目录结构如下：

-pages
    -pubs
        [id].vue

原本访问/pubs/somepub时页面显示正常。安装@vite-pwa/nuxt后，在nuxt.config.ts中配置该模块如下：

pwa: {
    manifest: {...name etc},
    workbox: {
      navigateFallback: '/'
    }
}

此时访问/pubs/somepub会被路由到首页。我尝试在workbox中添加：

globIgnores: [/pubs/]

以及：

navigateFallbackDenylist: [/^\/pubs/]

但仍无法访问动态路由，请问需要如何配置才能解决该问题？

解决方法 #

1. 修正navigateFallbackDenylist配置 #

globIgnores仅用于忽略预缓存文件，对路由导航规则无效。问题核心是Workbox的navigateFallback会拦截所有未匹配到预缓存资源的请求（动态路由属于客户端路由，无对应静态文件），需将/pubs开头的路径排除在回退规则外。

注意部分版本的@vite-pwa/nuxt要求正则以字符串形式传入，而非正则对象，调整配置如下：

pwa: {
  manifest: { /* 你的manifest配置 */ },
  workbox: {
    navigateFallback: '/',
    // 匹配所有/pubs开头的路径，禁止触发首页回退
    navigateFallbackDenylist: ['^/pubs']
  }
}

2. 为动态路由添加运行时缓存策略 #

若上述配置仍不生效，可通过runtimeCaching为/pubs/**路径单独设置缓存策略，优先使用网络请求，避免Workbox触发回退：

pwa: {
  manifest: { /* 你的manifest配置 */ },
  workbox: {
    navigateFallback: '/',
    runtimeCaching: [
      {
        urlPattern: '^/pubs/.*',
        handler: 'NetworkFirst',
        options: {
          cacheName: 'pubs-dynamic-cache',
          cacheableResponse: {
            statuses: [0, 200]
          }
        }
      }
    ]
  }
}

3. 静态部署时补充预渲染路由 #

如果是静态部署（执行nuxt generate），需确保Nuxt预渲染动态路由页面，或在配置中指定预渲染路由清单，让Workbox正确识别这些路径：

export default defineNuxtConfig({
  // ...其他Nuxt配置
  nitro: {
    prerender: {
      // 添加你的动态路由示例，或通过脚本自动获取所有需要预渲染的路由
      routes: ['/pubs/somepub', '/pubs/anotherpub']
    }
  },
  pwa: { /* ...PWA配置 */ }
})

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