Vue 3项目使用@vue/cli-plugin-pwa构建后未生成service-worker.js问题

核心原因 #

@vue/cli-plugin-pwa 默认仅在 NODE_ENV=production 的环境下执行构建逻辑，你自定义了构建模式为 prod.example，如果没有对应的环境变量配置声明该模式为生产环境，插件会默认跳过service-worker文件生成流程。

排查与解决步骤 #

• 步骤1：添加对应模式的环境变量配置
  在项目根目录新建 .env.prod.example 文件，写入以下内容：

NODE_ENV=production

重新执行构建命令即可触发pwa插件的打包流程，生成对应的service-worker.js到dist目录。

• 步骤2：校验sw源文件路径是否正确
  你当前使用 InjectManifest 模式，需保证 swSrc 配置的 src/service-worker.js 文件真实存在，路径拼写无误，否则构建过程会静默跳过sw生成。
• 步骤3：强制开启pwa插件（可选）
  如果不想修改当前模式的NODE_ENV，可以直接在vue.config.js的pwa配置中添加启用开关：

module.exports = {
  pwa: {
    // 强制所有模式下都启用pwa插件
    enabled: true,
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
    }
  }
}

新版本通知实现方案 #

成功通过插件生成sw文件后，可通过以下逻辑监听更新事件：
在项目入口文件（如main.js）中添加监听逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        // 监听有新sw等待激活的事件
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing
          newWorker.addEventListener('statechange', () => {
            if (newWorker.state === 'waiting') {
              // 这里可以弹出自定义提示，告知用户有新版本，点击刷新即可更新
              if (confirm('检测到新版本，是否立即刷新？')) {
                newWorker.postMessage({ type: 'SKIP_WAITING' })
                window.location.reload()
              }
            }
          })
        })
      })
  })
}

同时需要在你的src/service-worker.js中添加监听跳过等待的消息：

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting()
  }
})

每次构建时workbox会自动更新预缓存列表的哈希值，触发sw文件内容变化，浏览器检测到sw内容不一致就会触发更新流程，完美解决静态sw不更新的问题。

内容的提问来源于stack exchange，提问作者Ihsan Fajar Ramadhan