Vue + Firebase 托管页面在用户登录后显示空白

Question

我部署了一个 Vue2 项目到 Firebase 托管服务器，它需要用户登录才能看到其他页面。目前该站点只显示登录页面，如果用户通过身份验证，它将重定向到下一页，但显示为空白。

这是firebase.json的样子

{
"database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9000
    },
    "functions": {
      "port": 9001
    },
    "firestore": {
      "port": 9002
    },
    "database": {
      "port": 9003
    },
    "hosting": {
      "port": 9004
    },
    "pubsub": {
      "port": 9005
    },
    "storage": {
      "port": 9006
    },
    "ui": {
      "enabled": true,
      "port": 9007
    }
  },
  "remoteconfig": {},
  "functions": {
    "source": "functions"
  }
}

它确实部署到服务器，但它只显示登录页面。登录后所有其他页面均未显示（从登录页面重定向）。它确实正确地更改了路径 (url)。

这是我的route.js

import Login from './components/Login'
import Home from './components/Home'
import Dashboard from './views/Dashboard'
import Recipe from './views/Recipe'
import Permissions from './views/Permissions'
import Report from './views/Report'

export const routes = [{
      path: '*',
      redirect: '/login'
   },{
      path: '/login',
      name: 'login',
      component: Login
   },{
      path: '/home',
      name: 'home',
      redirect: '/dashboard',
      component: Home,
      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
      }],
      meta: {
         requiresAuth: true
      }
   }
];

和main.js

...
const router = new VueRouter({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();
});

let app = '';
firebase.auth().onAuthStateChanged(user => {
  store.commit('authStateChanged', user);
  if(!app){
    app = new Vue({
      router,
      store,
      firebase,
      i18n,
      render: h => h(App)
    }).$mount('#app')
  }
});

和登录vue

...
<script>
  import {auth} from '../fire';
  import Vue from 'vue';

  export default {
    name: 'Login',
    methods: {
      async onSubmit(event) {
        event.preventDefault();
        auth.signInWithEmailAndPassword(this.form.email, this.form.password)
        .then(() => {
          this.$router.replace('dashboard');
        }).catch((error) => {
          this.msg.err = error.code.replace('auth/','').split('-').join(' ');
        });
      }
    }
  }
</script>

我通过运行ning npm 运行 build 然后 firebase deploy --only hosting 部署了应用程序

代码有问题吗？

这是文件夹结构看起来像

hq
    dist
        css
        img
        js
        index.html
        ...
    public
        img
        index.html
        ...
    src
        assets
        components
        locales
        views
        ...
    firebase.json
    pacjage.json
    ...

谢谢。

Answer 1

发现是其中一个库在构建后出现问题，删除它并解决问题。

Vue + Firebase 托管页面在用户登录后显示空白

Vue + Firebase hosting page shows blank after user logged in

javascript

vue.js

vue-component

vue-router

firebase-hosting