构建vue 3时未生成服务工作者答案

【问题标题】：Service worker not generated when building vue 3构建vue 3时未生成服务工作者
【发布时间】：2021-08-25 05:17:15
【问题描述】：

我在我的 package.json 中安装了"@vue/cli-plugin-pwa": "^4.5.12",，我还在我的vue.config.js 中添加了工作箱配置。问题是，当我使用 npm run build:prd 构建项目时，我的脚本：vue-cli-service build --mode prod.example，我的 dist 文件夹中没有 service-worker.js。

这是我的 vue.config.js：

module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'src/service-worker.js',
            // ...other Workbox options...
        }
    }
}

我尝试将 pwa 插件配置移动到 package.json 中，但效果不佳。我只是在我的 dist 文件夹中找不到我的service-worker.js。

当前的解决方法是将我的service-worker.js 放在我的pubic 文件夹中。这种方法的问题在于，每次有新版本发布时，服务工作者都不会更新。目前的目的是通知客户端是否有新版本可用，但我无法触发update 事件，因为service-worker.js 是静态的

【问题讨论】：

可能是 vue3 中的一个错误，但这看起来与我在 vue2 中的类似 - 事情是，过去，我使用了默认的 GenerateSW 插件模式 -并触发更新 - 我只是在registerServiceWorker.js 的updated 回调中添加了一个document.dispatchEvent(new CustomEvent('swUpdated', { detail: registration }));，并在App.vue 中添加了一些相关代码以显示有更新
我已经这样做了，但问题是如果我使用GenerateSW注册失败，因为registerServiceWorker找不到我的service-worker.js
如我所说，那一定是vue3的bug

标签： javascript vue.js progressive-web-apps service-worker

【解决方案1】：

我发现了问题，@vue/cli-plugin-pwa 只会在process.env.NODE_ENV === 'production' 时生成service-worker。同时在我的项目中，当我运行npm run build 时，NODE_ENV 不会自动设置为production，但它仍然是development 我不知道是什么导致了这种行为，但是如果我添加@987654328，问题就解决了@ 在我所有的.env 中。这样，每次构建都会生成precache-manifest....js。

【讨论】：