Firebase与Vue集成问题求助：缓存异常及Unexpected token <错误

安全阿岳

2026-5-20

解决Vue + Firebase集成的缓存与Unexpected token <问题

先帮你拆解下遇到的几个核心问题，结合你提到的本地正常、线上托管出问题的情况，大概率是Firebase Hosting的缓存配置和资源加载逻辑导致的，咱们一步步来解决：

一、修复Firebase Hosting的缓存旧构建问题

你推测的缓存残留问题是非常合理的，Firebase Hosting默认会缓存静态资源，但Vue PWA这类单页应用需要精准的缓存规则，避免旧版本资源干扰：

调整firebase.json的缓存配置
在hosting字段中添加headers规则，区分静态资源和入口HTML的缓存策略：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.{js,css,json,png,jpg,jpeg,gif,svg,ico}",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

这套规则会让静态资源（js、css等）长期缓存，而入口index.html不会被缓存，确保每次请求都拉取最新的应用入口，从根源避免旧构建残留。

强制部署并清除CDN缓存
部署时加上--force参数强制覆盖旧资源：
```
firebase deploy --only hosting --force
```
也可以登录Firebase控制台，在Hosting页面手动点击「清除缓存」按钮，彻底清空CDN上的旧缓存。

二、解决Unexpected token <错误

这个错误基本都是因为浏览器请求的资源（比如js文件）返回了index.html的内容，通常和缓存或路由配置有关：

检查Vue路由的base路径配置
如果你的应用部署在子路径下，要在router/index.js中设置正确的base值：
```
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL, // 或者你的实际部署路径，比如'/my-app/'
  routes: [...]
})
```
同时确保firebase.json中的rewrite规则正确覆盖所有路径，也就是上面配置的"source": "**", "destination": "/index.html"。
验证打包后的资源路径
运行npm run build后，查看dist文件夹里的index.html，确认所有js、css的引用路径是正确的（绝对/相对路径无误）。如果路径错误，浏览器会请求不存在的资源，最终被rewrite到index.html，就会触发Unexpected token <错误。

三、解决Firebase Token重置与current为null的问题

这个问题通常是Firebase初始化时机不对，或者缓存导致初始化顺序混乱：

确保Firebase在Vue应用启动前完成初始化
修改main.js，先初始化Firebase，再挂载Vue实例：

import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/messaging'

// 初始化Firebase配置
const firebaseConfig = {
  // 你的Firebase配置信息
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

// 监听Auth状态变化，确保用户状态稳定后再挂载应用
let app
firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      render: h => h(App)
    }).$mount('#app')
  }
})

这样可以避免Vue实例先挂载，而Firebase还未完成初始化，导致currentUser为null的情况。

调整推送Token的获取时机
不要在应用启动时立刻获取Token，要等Auth状态稳定后再执行：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // 用户已登录，再获取推送Token
    firebase.messaging().getToken({ vapidKey: '你的VAPID密钥' })
      .then(token => {
        // 处理Token逻辑
      })
      .catch(err => {
        console.error('获取Token失败:', err)
      })
  }
})

避免在用户状态未初始化时就尝试获取Token，导致Token重复生成。

建议你先按顺序调整缓存配置，重新部署后测试，如果还有问题再检查路由和Firebase初始化逻辑，本地正常线上出问题的情况，绝大多数都是缓存或者路径配置的锅。

内容的提问来源于stack exchange，提问作者Cloud Soh Jun Fu

Firebase与Vue集成问题求助：缓存异常及Unexpected token <错误

一、修复Firebase Hosting的缓存旧构建问题 #

二、解决Unexpected token <错误 #

三、解决Firebase Token重置与current为null的问题 #

一、修复Firebase Hosting的缓存旧构建问题

二、解决Unexpected token <错误

三、解决Firebase Token重置与current为null的问题