如何在Vite.js中通过vitePWA插件将sw.js资源指向CDN路径

核心思路 #

保持VitePWA的base: "/"配置（避免manifest和registerSW跨域），通过Workbox的清单转换功能，给预缓存资源的URL手动添加CDN子域名前缀。

具体配置修改 #

在你的vite.ts.config的VitePWA插件配置中，添加workbox选项，使用precacheManifestTransform处理预缓存清单：

export default defineConfig(async () => {
  return {
    base: "https://www.resource.fakesite/",
    plugins: [
      importToCDN(),
      VitePWA({
        base: "/",
        registerType: "prompt",
        manifest: {
          name: "xxx",
          short_name: "xxx",
          icons: xxx,
          display: "standalone",
          start_url: `xxx`,
          orientation: "portrait",
        },
        // 添加以下workbox配置
        workbox: {
          precacheManifestTransform: (manifestEntries) => {
            const cdnPrefix = "https://www.resource.fakesite/";
            // 给每个预缓存资源的URL加上CDN前缀
            const transformed = manifestEntries.map(entry => ({
              ...entry,
              url: cdnPrefix + entry.url
            }));
            return { manifest: transformed, warnings: [] };
          }
        }
      }),
      react({
        babel: {
          parserOpts: {
            plugins: ["decorators-legacy", "classProperties"],
          },
        },
        include: "**/*.{jsx,tsx}",
      }),
      viteS3(),
    ],
  };
});

效果说明 #

编译后的sw.js中，precacheAndRoute里的资源URL会自动替换为完整的CDN路径：

s.precacheAndRoute([{
    url: "https://www.resource.fakesite/assets/create-form-53cf1c8a.js",
    revision: null
}, {
    url: "https://www.resource.fakesite/assets/post-9e6c5856.js",
    revision: null
}])

同时，index.html中的manifest.webmanifest和registerSW.js仍会从主域加载，避免跨域导致的Service Worker安装失败问题。

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