Nuxt.js 中注册 Service Worker（firebase-messaging-sw.js）报404错误怎么办？

报错本质是Service Worker脚本无法被正常拉取，请求返回404，核心矛盾是Nuxt的静态资源输出规则与Service Worker的脚本访问路径不匹配。

文件放置规范 #

按照Nuxt版本差异，把firebase-messaging-sw.js放到可直接映射到站点根路径的静态资源目录：

• Nuxt 2：存放至项目根目录下的static/文件夹，构建时该目录内的文件会直接作为站点根路径资源输出，对应脚本访问地址为/firebase-messaging-sw.js
• Nuxt 3：存放至项目根目录下的public/文件夹，资源映射逻辑与Nuxt 2的static目录完全一致

修正注册路径写法 #

原注册代码使用相对路径./firebase-messaging-sw.js，在不同路由层级下会出现路径解析偏移，导致脚本拉取失败。替换为站点绝对路径的修正代码如下：

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then(function(registration) {
          console.log('Registration successful, scope is:', registration.scope);
      }).catch(function(err) {
        console.log('Service worker registration failed, error:', err);
      });
}

避免Firebase重复触发注册逻辑 #

手动完成Service Worker注册后，需要在初始化Firebase Messaging时关联该已完成的注册实例，否则Firebase会自动发起默认Service Worker的注册请求，重复拉取firebase-messaging-sw.js触发同样的404报错。

排错校验要点 #

• 不要将firebase-messaging-sw.js放在assets/、components/等需要经webpack打包编译的目录下，这类目录的文件会被编译处理，不会直接输出到站点根路径，必然触发404
• 如果项目配置了自定义部署根路径（比如站点托管在/my-app/子路径下），注册时的sw路径需要同步拼接对应base前缀，保证与实际资源访问路径一致
• 生产环境部署完成后，可直接在浏览器输入站点地址拼接脚本路径，确认脚本可正常返回内容，排除CDN缓存、路由重写规则拦截静态资源的问题

内容的提问来源于stack exchange，提问作者Edouard Yonga