Vue3 PWA接入Workbox报Cannot use import outside module错误

Service Worker 脚本默认运行在经典非模块脚本的全局作用域下，原生不支持ES模块的import导入语法。只要在SW脚本中出现import xxx from 'xxx'这类语句，不管有没有通过importScripts引入CDN资源，都会直接触发Cannot use import statement outside a module的语法解析错误，最终导致SW注册失败。

你之前通过importScripts引入Workbox CDN后能正常运行，是因为这种引入方式下，Workbox的所有API会被挂载到全局的workbox命名空间下，本身就不需要写import语句调用。

在你已经通过CDN importScripts引入Workbox的场景下，不需要引入额外打包流程，直接调整代码写法即可：

• 完全删掉之前手动添加的三行import语句
• 所有Workbox相关的API，直接通过全局workbox对象的对应命名空间调用即可，参考示例：

  // 路由注册逻辑调用 workbox.routing 下的方法
  workbox.routing.registerRoute(
    /\.(?:js|css|png|jpg)$/,
    new workbox.strategies.StaleWhileRevalidate()
  );
  
  // 后台同步队列直接调用 workbox.backgroundSync 下的类
  const syncQueue = new workbox.backgroundSync.Queue('offline-action-queue');
  

注意：通过CDN引入的workbox-sw会自动加载所有核心模块（路由、缓存策略、后台同步等），不需要额外通过import语句单独导入。

如果你更习惯用原生import语法维护SW逻辑，不要在Vue构建生成的service-worker.js产物里手动追加代码，切换为标准的源文件构建流程：

• 单独新建一个SW源文件（比如放在项目src目录下的custom-sw.js），在这个源文件里书写需要的import语句和自定义缓存逻辑
• 在Vue PWA插件的配置项中，指定swSrc为你刚才新建的源文件路径
• 构建流程会自动把源文件里的所有Workbox依赖打包进最终输出的SW脚本，自动注入precache清单，不需要手动写importScripts相关代码
• 整个打包过程会把所有ES模块的import语句转成兼容SW经典脚本环境的形式，不会触发语法错误

注意事项

• 不要直接修改Vue构建流程生成的service-worker.js文件，这类文件每次执行构建命令都会被重新覆盖，手动写入的代码要么丢失，要么因为不符合构建产物的格式要求触发运行错误
• 虽然Service Worker规范支持在注册时指定type: 'module'开启模块模式，支持原生import语法，但这种模式和Vue PWA插件默认生成的SW脚本格式不兼容，需要完全自定义SW注册逻辑，维护成本较高，不推荐在当前配置下使用

内容的提问来源于stack exchange，提问作者khode-hub