Vite PWA插件中静态站点路由重定向问题解决方案

问题背景

在使用Vite PWA插件构建静态站点时，开发者可能会遇到一个常见的路由重定向问题：当访问类似/notice这样的路径时，系统会自动添加斜杠变为/notice/，然后又被重定向到首页/。这种行为会导致无法正确显示缓存内容，影响用户体验。

问题分析

这种现象通常与PWA服务工作线程(Service Worker)的配置有关。在静态站点生成(SSG)模式下，Vite PWA插件默认会为所有路由设置一个回退策略(fallback)。当访问的路径以斜杠结尾时，服务工作线程会尝试匹配对应的静态文件，如果找不到就会回退到首页。

解决方案

通过配置navigateFallbackDenylist选项可以解决这个问题。这个选项允许开发者指定哪些路径不应该触发回退到首页的行为。

// nuxt.config.ts
pwa: {
  workbox: {
    navigateFallbackDenylist: [
      /\/$/,    // 匹配以斜杠结尾的路径
      /\?\w+/,  // 匹配带查询参数的路径
    ],
  }
}

配置详解

1. /\/$/：这个正则表达式匹配所有以斜杠结尾的路径，防止这些路径被重定向到首页。

2. /\?\w+/：这个正则表达式匹配带有查询参数的路径，同样防止它们被重定向。

实现原理

当配置了navigateFallbackDenylist后，服务工作线程会检查当前请求的URL是否匹配列表中的任何模式。如果匹配，则不会触发回退到首页的行为，而是尝试直接加载请求的资源或显示404页面。

最佳实践

1. 精确匹配：根据项目实际需求，可以调整正则表达式来更精确地控制哪些路径应该被排除在回退行为之外。

2. 测试验证：在部署前，应该测试各种路径组合，确保路由行为符合预期。

3. 渐进增强：考虑为不支持服务工作线程的浏览器提供合理的降级方案。

总结

通过合理配置Vite PWA插件的navigateFallbackDenylist选项，开发者可以有效控制静态站点的路由行为，避免不必要的重定向问题。这种解决方案既保持了PWA的离线能力，又提供了更符合预期的路由体验。

对于使用Nuxt.js框架的开发者，同样的配置原理也适用，只需在Nuxt的PWA模块配置中进行相应设置即可。