vue-cli-service 构建：新的 workbox-webpack-plugin 选项的验证错误答案

【问题标题】：vue-cli-service build: validationError for new workbox-webpack-plugin optionsvue-cli-service 构建：新的 workbox-webpack-plugin 选项的验证错误
【发布时间】：2019-04-18 22:47:05
【问题描述】：

使用以下 vue.config.js：

module.exports = {
  pwa: { 
    name: 'My App',
    ...
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

构建期间的验证错误是“skipWaiting”和“clientsClaim”不是受支持的参数。为什么？ swSrc 来自here 列出的相同选项列表，并且构建不会抱怨该选项。当我删除这两个选项时，构建工作。

所以我想我的问题是：

skipWaiting、clientsClaim 是什么的“不支持的参数”？网络包？ PWA 插件？ workbox-webpack 插件？我在哪里可以找到正确的选项集？谢谢。

更新：我没有设置 NODE-ENV 的 .env 文件。但是，我猜想构建生产资产的npm run build 仅在我删除 2 个选项时才有效。 dev (npm run serve) 中删除的选项不会产生任何服务工作者文件。

【问题讨论】：

标签： vue.js webpack workbox vue-cli-3 workbox-webpack-plugin

【解决方案1】：

您在InjectManifest 模式下使用工作箱插件，但传递GenerateSW 的参数。

InjectManifest 模式需要注入一个现有的 service-worker 文件，它的路径在swSrc 中定义，而GenerateSW 将创建 service-worker 文件，因此接受不同的选项集（例如 swDest 等)

每种模式的所有选项都可以在您在相应部分中发布的workbox-webpack-plugin 的同一文档页面上找到。

【讨论】：

好的，基于此，我现在为来自 CDN 的 workbox-sw.js 包含了 importScripts()。我以为 vue 会为我做到这一点。我现在只有一个 console.log 在我的工作人员中 - 稍后将查看您发送的更复杂内容的链接。现在注册失败，Service worker not found at /sw.js 所以文件仍然没有生成:(
无论如何我都会接受你的回答，因为它解释了validationError！
谢谢。检查它是否已生成。因为，如果未指定swDest，默认输出将是service-worker.js。