Ionic Vue3部署Firebase子域名后直接访问路由出现404问题排查

你的方向完全正确，问题根源就是Firebase托管的路由重写配置没有正确关联到portal.example.com这个子站点，导致直接访问深层路由时，Firebase没有将请求转发到Vue应用的index.html，从而返回404。

核心问题分析 #

你当前的firebase.json只有单条托管配置，但你实际是多站点托管（www和portal两个子域名对应不同站点），缺少站点关联配置，导致重写规则没有作用在portal站点上。

修复步骤 #

1. 在Firebase控制台配置多站点
   进入Firebase控制台的「托管」页面，为portal.example.com创建独立站点（记好站点ID，比如site2），完成域名验证和关联。

2. 修改firebase.json配置
   配置两个托管条目，分别对应两个站点，明确指定site属性，确保portal站点的重写规则生效：

   {
     "hosting": [
       {
         "site": "site1", // 对应www.example.com的站点ID（控制台托管页面可查）
         "public": "path-to-www-static-files", // 你的纯HTML站点文件目录
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ]
       },
       {
         "site": "site2", // 对应portal.example.com的站点ID
         "public": "dist", // Vue3应用的构建产物目录
         "ignore": [
           "firebase.json",
           "**/.*",
           "**/node_modules/**"
         ],
         "rewrites": [
           {
             "source": "**",
             "destination": "/index.html"
           }
         ]
       }
     ]
   }
   

3. 部署对应站点

   • 部署www站点：firebase deploy --only hosting:site1
   • 部署portal站点：firebase deploy --only hosting:site2

额外确认 #

确保你的Vue3路由使用history模式，路由配置示例：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // 不是createWebHashHistory()
  routes: [/* 你的路由配置 */]
})

这样修改后，直接访问portal.example.com/contacts这类深层路由时，Firebase会正确将请求转发到Vue应用的index.html，由Vue路由处理页面渲染。

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