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

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 中找到配置它的方法。

Extra: @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, or just read the source code。

总之，如果你还想使用GenerateSW模式：

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

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

How to configure importScript when using vue-cli-pwa plugin

workbox