Vue.js 如何在localhost中使用cli插件pwa和workbox

我已经使用cli插件pwa学习了不同的教程，而且似乎service worker甚至应该在localhost中启用。但是，当我运行build my app时，我不断收到一个错误（“Service worker安装失败。将在下次导航期间自动重试”），导致Service worker未安装。我查看了错误来源的文件，它位于workbox precache.mjs precacheController中：

import {logger} from 'workbox-core/_private/logger.mjs';
import {getOrCreatePrecacheController} from './utils/getOrCreatePrecacheController.mjs';
import {precachePlugins} from './utils/precachePlugins.mjs';
import './_version.mjs';


const installListener = (event) => {
  const precacheController = getOrCreatePrecacheController();
  const plugins = precachePlugins.get();

  event.waitUntil(
      precacheController.install({event, plugins})
          .catch((error) => {
            console.log(process.env.NODE_ENV)
            if (process.env.NODE_ENV !== 'production') {
              logger.error(`Service worker installation failed. It will ` +
              `be retried automatically during the next navigation.`);
            }
            // Re-throw the error to ensure installation fails.
            throw error;
          })
  );
};

因此，首先，我想知道是什么导致了这个错误，同时我也很惊讶如果条件满足，因为我在prod env中（我验证了它是通过控制台记录process.env.NODE_env的）

有没有关于我在这里遗漏了什么的建议

我的软件设置：

registerServiceWorker.js

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

service-worker.js

workbox.core.setCacheNameDetails({ prefix: 'xxx' })
self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

vue.config.js

module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
    }
  }
}

---

如果您的预缓存清单中有一个URL在Web服务器上不存在，则通常会看到该错误。您是否看到任何有关获取给定URL失败的日志消息？如果查看生成的清单，是否有任何URL看起来很奇怪？