Vue Маршрутизатор отлично работает в разработке, но не соответствует маршрутам в производстве - PullRequest
Новая
       7

Vue Маршрутизатор отлично работает в разработке, но не соответствует маршрутам в производстве

0 голосов
/ 11 июля 2020

У меня есть Vue SPA, который обслуживается ASP Core API. Когда я запускаю его в режиме разработки, все работает отлично. Но как только я развертываю его в производственной среде (в службе приложений Azure), я всегда получаю пустую страницу.

Кажется, именно маршрутизатор не может сопоставить маршруты, насколько я могу поместите произвольное HTML в мое приложение. vue, и это будет отображаться.

Если я go в инструментах разработчика, я вижу, что index. html и все. js файлы скачиваются успешно, ошибок в консоли нет. Это верно независимо от того, какой URL я посещаю, например myapp.com и myapp.com/login, оба загружают все, но ничего не отображается на экране.

Я видел несколько сообщений, в которых предлагалось изменить режим маршрутизации на ha sh, но я все равно получаю тот же результат.

Пожалуйста, смотрите ниже мои файлы:

main.ts 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';
import { LOGIN_INITIALISE } from './use-cases/user-auth/AuthModule';

Vue.config.productionTip = false;

store.dispatch(LOGIN_INITIALISE)
  .then(() => {
    new Vue({
      router,
      store,
      vuetify,
      render: (h) => h(App),
    }).$mount('#app');
  });

Приложение vue

<template>
  <div>
    <div>test</div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
/* eslint-disable no-underscore-dangle */

import Vue from 'vue';
import Axios from 'axios';
import { LOGOUT } from './use-cases/user-auth/AuthModule';
import { LOGIN } from './router/route-names';

export default Vue.extend({
  name: 'App',
  created() {
    // configure axios
    Axios.defaults.baseURL = '/api';
    Axios.interceptors.response.use(undefined, (err) => {
      // log user out if token has expired
      if (err.response.status === 401 && err.config && !err.config.__isRetryRequest) {
        this.$store.dispatch(LOGOUT);
        this.$router.push({ name: LOGIN });
      }
      throw err;
    });
  },

});
</script>

router / index.ts 

import Vue from 'vue';
import {} from 'vuex';
import VueRouter, { RouteConfig } from 'vue-router';
import store from '@/store';
import {
  HOME,
  LOGIN,
  SIGNUP,
  USERS,
} from './route-names';

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: HOME,
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/login',
    name: LOGIN,
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/signup',
    name: SIGNUP,
    component: () => import('@/views/SignUp.vue'),
  },
  {
    path: '/users',
    name: USERS,
    component: () => import('@/views/Users.vue'),
    beforeEnter: (to, from, next) => {
      if (store.getters.userRole === 'Admin') {
        next();
      } else {
        next({ name: HOME });
      }
    },
  },
  {
    path: '*',
    name: '404',
    component: {
      template: '<span>404 Not Found</span>',
    },
  },
];

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

router.beforeEach((to, from, next) => {
  if (store.getters.isAuthenticated) {
    next();
  } else if (to.name === LOGIN || to.name === SIGNUP) {
    next();
  } else {
    next({ name: LOGIN });
  }
});

export default router;

1 Ответ

0 голосов
/ 12 июля 2020

Наконец, после полной перестройки маршрутизатора по частям, я обнаружил проблему. Я обнаружил, что проблема заключалась в этой глобальной защите маршрутов: 

router.beforeEach((to, from, next) => {
  if (store.getters.isAuthenticated) {
    next();
  } else if (to.name === LOGIN || to.name === SIGNUP) {
    next();
  } else {
    next({ name: LOGIN });
  }
});

В частности, геттер isAuthenticated выдавал ошибку (незаметно), поэтому все маршруты завершились ошибкой до того, как они смогли обработать. Я обернул свой isAuthenticated logi c в try-catch, который возвращает false, если возникает ошибка, и теперь все работает нормально.

Я до сих пор не понимаю, почему это влияет только на производственную сборку, но, надеюсь, этот опыт будет полезен другим, застрявшим в такой же ситуации.

...