Блог

Я развернул проект 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  }  } ];  

And main.js

 ... const router = new VueRouter({  mode: 'history',  routes });  router.beforeEach((to, from, next) =gt; {  const currentUser = firebase.auth().currentUser;  const requiresAuth = to.matched.some(record =gt; record.meta.requiresAuth);  if (requiresAuth amp;amp; !currentUser) next('login');  else if (!requiresAuth amp;amp; currentUser) next('home');  else next(); });  let app = ''; firebase.auth().onAuthStateChanged(user =gt; {  store.commit('authStateChanged', user);  if(!app){  app = new Vue({  router,  store,  firebase,  i18n,  render: h =gt; h(App)  }).$mount('#app')  } });  

And the login vue

 ... lt;scriptgt;  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(() =gt; {  this.$router.replace('dashboard');  }).catch((error) =gt; {  this.msg.err = error.code.replace('auth/','').split('-').join(' ');  });  }  }  } lt;/scriptgt;  

Я развернул приложение, запустив npm, запустив сборку, а затем развертывание firebase-только хостинг

Есть ли что-то не так с кодом?

Вот структура папок выглядит следующим образом

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

Спасибо.

Выяснил, что у одной из библиотек есть проблема после сборки, удалил ее и проблема решена.