Vue2项目部署Firebase Hosting后登录跳转页面显示空白如何解决？

问题1：子路由路径配置错误（核心原因） #

Vue Router中子路由的path如果以/开头会被识别为绝对根路径，不会嵌套在父路由路径下，也不会继承父路由的配置和挂载上下文。你当前的子路由配置会导致：

• 访问/dashboard时仅匹配到子路由规则，未触发父路由/home的组件渲染
• 子组件没有父组件Home内的<router-view>作为挂载点，最终页面空白

修复方法： #

修改route.js中的子路由path为相对路径（去掉开头的/）：

// 原错误写法
children:[{
  path: '/dashboard',
  name: 'dashboard',
  component: Dashboard
},
// ... 其他子路由同理
]

// 修正后写法
children:[{
  path: 'dashboard', // 去掉开头的/
  name: 'dashboard',
  component: Dashboard
},{
  path:'recipe',
  name:'recipe',
  component: Recipe
},{
  path:'permissions',
  name:'permissions',
  component: Permissions
},{
  path:'report',
  name:'report',
  component: Report
}],

修正后子路由的完整路径为/home/dashboard，会自动嵌套到Home组件的<router-view>中渲染，同时继承父路由的meta.requiresAuth校验规则。

问题2：登录跳转逻辑适配 #

子路由修正后，跳转逻辑也要对应调整，避免404：

// 原登录跳转写法
this.$router.replace('dashboard');

// 修正后两种写法二选一：
// 写法1：用路由name跳转（更稳定，不受路径修改影响）
this.$router.replace({name: 'dashboard'});
// 写法2：用完整绝对路径跳转
this.$router.replace('/home/dashboard');

问题3：检查Home组件是否有路由出口 #

确认Home.vue组件模板中存在<router-view>标签，用于渲染子路由对应的组件，缺少该标签也会导致子页面空白。

问题4：检查打包公共路径配置 #

确认项目根目录下vue.config.js中的publicPath配置为根路径：

module.exports = {
  publicPath: '/' // 不要设置为相对路径'./'，否则history模式下非根路径页面会加载资源失败
}

验证步骤 #

修改完成后重新执行：

1. npm run build 打包项目
2. firebase deploy --only hosting 重新部署

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