Question

自动生成的service-worker.js导入工作盒，如下所示：

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

由于我的客户端可能无法访问googleapis.com，因此我想从服务器上为工作箱提供服务，就像document所描述的那样。

importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox/'
});

但是我找不到从@vue/cli-plugin-pwa进行配置的方法。

其他：@vue/cli-plugin-pwa正在使用workbox@4.3.1，我找不到匹配的文档。在Google上提供的文档适用于5.1.2版。

文件资产

vue.config.js


module.exports = {
    pwa: {
        workboxPluginMode: 'InjectManifest',  // 自定义功能
        workboxOptions: {
          swSrc: './src/sw.js',
          swDest: 'service-worker.js',
        },
    }
}

sw.js

importScripts('/third-party/workbox/workbox-sw.js');
workbox.setConfig({
  modulePathPrefix: '/third-party/workbox/'
});
console.log('hello from service worker');

输出：

importScripts("/precache-manifest.247d2cef5fd7daa4fb6945d4ca3b21f4.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts('/third-party/workbox/workbox-sw.js');
workbox.setConfig({
  modulePathPrefix: '/third-party/workbox/'
});
console.log('hello from service worker');

Answer 1

您可以找到v4文档here或仅找到read the source code。

简而言之，如果您仍然想使用GenerateSW模式：

module.exports = {
  pwa: {
    workboxOptions: {
      importWorkboxFrom: 'local'
    }
  }
}

使用vue-cli-pwa插件时如何配置importScript

1 个答案: