workbox-build生成Service Worker放子目录遇缓存路径错误，求解决方案

当然可以把service-worker.js放在src/Workbox子目录下，问题出在Workbox生成预缓存清单时的路径基准计算上：当Service Worker位于子目录时，它会默认以自身所在目录为基准解析缓存文件的相对路径，导致原本在src/根目录的文件被错误解析为src/Workbox/下的路径，从而触发404错误。

你只需要在generateSW配置中添加modifyURLPrefix修正缓存路径，同时排除生成的Service Worker文件本身避免不必要的缓存：

修改后的build.js代码 #

const { generateSW } = require("workbox-build");

generateSW({
    globDirectory: "../src/",
    globPatterns: ["**/*"],
    swDest: "../src/Workbox/service-worker.js",
    // 修正路径前缀：让所有缓存文件的相对路径指向src根目录
    modifyURLPrefix: {
        "": "../"
    },
    // 排除生成的service-worker.js，避免缓存自身
    globIgnores: ["Workbox/service-worker.js"]
})

原理说明 #

• modifyURLPrefix: { "": "../" }会给所有预缓存的文件路径添加../前缀，这样位于src/Workbox的Service Worker就能正确找到src/根目录下的文件（比如../a.png对应实际的src/a.png）。
• 如果你的网站部署在域名根目录（而非/src/子路径），也可以改用绝对路径彻底避免相对路径问题：

  modifyURLPrefix: {
      "": "/src/"
  }
  

修改后，index.html中的Service Worker注册代码无需改动，依然可以正常使用Workbox/service-worker.js的相对路径进行注册。

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