如何配置vue-cli-pwa插件的importScript以本地托管Workbox

我刚好遇到过类似的情况，在使用Vue CLI的PWA插件（对应Workbox 4.x）时，默认的谷歌CDN引入确实会导致部分地区用户无法正常加载Workbox。以下是具体的解决步骤：

1. 修改vue.config.js配置，禁用自动注入CDN的Workbox #

在你的vue.config.js中，需要明确配置workboxOptions，将importWorkboxFrom设置为'none'，这样插件就不会自动在生成的Service Worker文件顶部添加谷歌CDN的引入代码了。同时确保你已经配置了injectManifest模式指向你的自定义SW文件：

module.exports = {
  pwa: {
    workboxOptions: {
      // 启用InjectManifest模式，指向自定义SW文件
      swSrc: './src/sw.js',
      // 禁用插件自动引入Workbox的CDN或本地文件
      importWorkboxFrom: 'none'
    }
  }
}

2. 在自定义SW文件中手动引入自有服务器的Workbox #

打开你自定义的src/sw.js，添加以下代码（替换成你自己的托管路径）：

// 引入自有服务器上的Workbox主文件
importScripts('/third_party/workbox/workbox-sw.js');

// 设置Workbox模块的加载路径前缀，确保子模块能正确加载
workbox.setConfig({
  modulePathPrefix: '/third_party/workbox/'
});

// 接下来可以添加你自己的SW逻辑，比如缓存策略等
// 示例：缓存静态资源的基础策略
workbox.routing.registerRoute(
  /\.(?:js|css|html)$/,
  new workbox.strategies.StaleWhileRevalidate()
);

3. 确保自有服务器部署了完整的Workbox 4.3.1文件 #

你需要从Workbox的npm包或官方仓库下载Workbox 4.3.1的完整文件包，将所有相关文件（包括workbox-sw.js、workbox-core.js、workbox-routing.js等核心模块）部署到服务器的/third_party/workbox/目录下，确保这些文件能被客户端正常访问。

为什么之前会同时出现CDN引入和自定义代码？ #

默认情况下，即使你使用了InjectManifest模式，@vue/cli-plugin-pwa（Workbox 4.x版本）仍然会自动在生成的SW文件顶部添加CDN的importScripts语句。只有通过设置importWorkboxFrom: 'none'，才能完全禁用这个自动注入行为，让你的自定义引入代码生效。

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