部署在Github Pages的Vite PWA中Workbox缓存条目出现双斜杠问题

• 对齐Vite与Workbox的base路径配置
  GitHub Pages部署在子路径下，需确保vite-plugin-pwa的workbox配置与Vite的base参数一致，且避免重复斜杠。例如Vite的base设为/${repoName}/时，workbox的base可去掉尾部斜杠，防止拼接时出现双斜杠：

  import { VitePWA } from 'vite-plugin-pwa';
  
  export default {
    base: process.env.BASE_URL || '/',
    plugins: [
      VitePWA({
        workbox: {
          base: process.env.BASE_URL?.replace(/\/$/, '') || '/',
          // 其他Workbox配置
        }
      })
    ]
  };
  

• 检查Workbox缓存策略的路径处理
  排查runtimeCaching或globPatterns配置，避免手动拼接路径时重复加斜杠。比如不要用${base}/${path}的写法，依赖Workbox自动拼接资源路径；若需自定义缓存键，可使用Workbox的路径规范化方法：

  import { normalizeURL } from 'workbox-core';
  
  // 缓存前规范化URL，消除双斜杠
  const cacheKey = normalizeURL(request.url);
  

• 验证构建后的Service Worker内容
  构建完成后，打开生成的service-worker.js，检查precacheManifest中的资源路径是否存在双斜杠。若有，说明构建时路径拼接错误，需调整Vite或PWA插件的base配置。

• 调整GitHub Actions的Build命令
  尝试移除base参数的尾部斜杠，修改为：

  - name: Production Build
    run: bun run build:prod -- --base=/${{ github.event.repository.name }}
  

  避免Vite的base尾部斜杠与Workbox的路径拼接叠加出双斜杠。

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