Firebase Hosting部署问题：显示默认欢迎页而非Vue.js应用

以下是针对该问题的逐步排查和解决指引：

1. 确认部署资源的正确性 #

• 本地检查dist目录下的index.html：确保该文件是Vue项目执行npm run build后生成的产物，而非Firebase初始化时自动创建的默认欢迎页文件。
• 查看部署日志：执行firebase deploy --only hosting时，观察控制台输出的文件上传列表，确认dist下的所有资源（包括index.html、JS/CSS文件等）都被正常上传，而不是仅上传了默认文件。

2. 验证firebase.json配置 #

• 确认public字段准确指向dist：检查配置中"public": "dist"是否正确，路径是相对于项目根目录的相对路径，避免拼写错误。
• 添加Vue单页应用重写规则（可选但推荐）：Vue单页应用需要路由重写支持，补充该规则可避免后续路由问题，配置示例：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 确认当前Firebase项目/站点：执行firebase use命令，检查是否部署到了预期的Firebase项目，避免误部署到其他站点。

3. 清除缓存 #

• 本地缓存：使用浏览器隐私模式访问站点，排除本地缓存影响。
• Firebase CDN缓存：Firebase Hosting的CDN缓存可能导致旧页面未更新，可通过以下方式刷新：
  • 执行部署命令时添加缓存清除标记：firebase deploy --only hosting -m "clear cache"
  • 登录Firebase控制台，进入对应项目的Hosting页面，找到「缓存存储」选项手动清除缓存。

4. 排查默认文件干扰 #

• 检查项目根目录是否存在public文件夹：如果该文件夹存在且包含Firebase默认的index.html，可能导致部署时优先级错误，建议删除该文件夹，确保firebase.json中指定的dist是唯一的公共目录。
• 检查.gitignore配置：如果.gitignore中包含dist/，但Firebase部署不受Git忽略规则影响（除非在firebase.json的ignore字段中配置），只需确保本地dist目录存在且内容正确即可。

常见问题总结 #

• 部署目标错误：误将默认public目录作为部署源，而非Vue的dist目录。
• 缓存未刷新：CDN缓存未及时更新，导致旧的默认页面持续展示。
• 项目切换错误：部署到了非预期的Firebase项目/站点。
• 构建产物异常：npm run build未正确生成dist目录内容。

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