Vue.js注册Service Worker：配置正确MIME-Type适配FCM推送

我之前在集成FCM的时候也碰到过一模一样的问题——明明能访问到firebase-messaging-sw.js，但浏览器一直提示MIME类型不对，折腾了好一会儿才找到根源和解决方案，分享给你：

最简便的方案：把SW文件移到public目录（Vue CLI 3+） #

如果你用的是Vue CLI 3及以上版本，强烈建议把firebase-messaging-sw.js从static目录移到项目根目录的public文件夹下。

原因是：public目录下的文件会被直接复制到打包后的dist根目录，不会经过webpack的处理，服务器会直接将其识别为静态JS文件，自动返回application/javascript的MIME类型，完全避开路由拦截导致的MIME错误。

之后在你的Vue代码中注册SW时，路径直接写/firebase-messaging-sw.js即可：

import { initializeApp } from "firebase/app";
import { getMessaging, registerServiceWorker } from "firebase/messaging";

const firebaseApp = initializeApp(yourFirebaseConfig);
const messaging = getMessaging(firebaseApp);

registerServiceWorker("/firebase-messaging-sw.js")
  .then((registration) => {
    console.log("SW registered:", registration);
  })
  .catch((err) => {
    console.error("SW registration failed:", err);
  });

如果你坚持用static目录：配置服务器路由规则 #

如果因为某些原因不能移动文件，那问题大概率是服务器把firebase-messaging-sw.js的请求当成了SPA路由，返回了index.html的内容，所以MIME类型变成了text/html。需要针对不同环境配置路由规则：

1. 本地开发环境（Vue CLI 2） #

在config/index.js的devServer中添加historyApiFallback的重写规则，确保SW文件请求被直接返回：

module.exports = {
  // 其他配置...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/firebase-messaging-sw\.js$/, to: '/static/firebase-messaging-sw.js' }
      ]
    },
    // 其他devServer配置...
  }
}

2. 本地开发环境（Vue CLI 3+） #

在项目根目录创建vue.config.js（如果没有的话），添加如下配置：

module.exports = {
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/firebase-messaging-sw\.js$/, to: '/static/firebase-messaging-sw.js' }
      ]
    }
  }
}

3. 生产部署：Nginx配置 #

如果部署到Nginx，需要在配置文件中添加规则，让SW文件请求不被SPA路由拦截，并强制设置正确的MIME类型：

# 先处理SW文件的请求，直接返回静态文件
location = /firebase-messaging-sw.js {
  alias /path/to/your/dist/static/firebase-messaging-sw.js; # 替换成你的dist路径
  add_header Content-Type application/javascript;
}

# 处理SPA路由，其他请求返回index.html
location / {
  try_files $uri $uri/ /index.html;
}

4. 生产部署：Netlify/Vercel等静态托管平台 #

• Netlify：在项目根目录创建_netlify.toml文件：

[[redirects]]
  from = "/firebase-messaging-sw.js"
  to = "/static/firebase-messaging-sw.js"
  status = 200
  headers = { Content-Type = "application/javascript" }

• Vercel：在项目根目录创建vercel.json文件：

{
  "routes": [
    {
      "src": "/firebase-messaging-sw.js",
      "dest": "/static/firebase-messaging-sw.js",
      "headers": { "Content-Type": "application/javascript" }
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

验证是否生效 #

修改配置后，重启服务器/重新部署，然后在浏览器中访问https://your-domain/firebase-messaging-sw.js，打开开发者工具的网络标签，查看该请求的Content-Type是否为application/javascript，如果是就说明配置成功了。

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