Vue 2 如何添加 register-service-worker 实现缓存请求的问题

    "register-service-worker": "^1.7.2",  // 用于管理  service-worker 的文件注册更新等
    "@vue/cli-plugin-pwa": "^4.5.19",

npm i register-service-worker

npm i  -D @vue/cli-plugin-pwa@4.5.19

  "dependencies": {
    ...
    "register-service-worker": "^1.7.2",
    ...
  },
  "devDependencies": {
  	...
    "@vue/cli-plugin-pwa": "^4.5.19",
    ...
  }

/* eslint-disable no-console */

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' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    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)
    }
  })
}

import "./registerServiceWorker"

/**
     * PWA 设置
     */
    pwa: {
        name: '地图工具', // 名字
        themeColor: "white", // 背景颜色
        appleMobileWebAppCapable: true, // 苹果 WebApp 支持

        // manifest 设置
        manifestOptions: {
            name: '地图工具',
            short_name: "地图工具",
            theme_color: "white",
            start_url: ".",
            display: "standalone",
            background_color: "white",
            icons: [
                {
                    src: "favicon.png", // 这里的图片地址对应 /public 目录中的图片地址
                    sizes: "512x512",
                    type: "image/png",
                    purpose: "any",
                }
            ],
        },

        // 图标
        iconPaths: {
            // 这里是项目外的路径，对应 public 目录
            favicon32: 'favicon.png', // 这里的图片地址对应 /public 目录中的图片地址
            favicon16: 'favicon.png', // 这里的图片地址对应 /public 目录中的图片地址
            maskIcon: null,
            msTileImage: null
        }
    }