Vue Router 在开发中工作正常，但与生产中的路由不匹配答案

【问题标题】：Vue Router works fine in development, but doesn't match routes in productionVue Router 在开发中工作正常，但与生产中的路由不匹配
【发布时间】：2020-11-01 06:24:53
【问题描述】：

我有一个由 ASP Core API 提供服务的 Vue SPA。当我在开发模式下运行它时，一切正常。但是一旦我将它部署到生产环境（在 Azure 应用服务上），我总是会得到一个空白页。

似乎是路由器无法匹配路由，因为我可以将一些任意 HTML 放入我的 App.vue 中，然后渲染。

如果我进入开发者工具，我可以看到 index.html 和所有 .js 文件下载成功并且控制台没有错误。无论我访问什么 URL，这都是正确的，例如myapp.com 和 myapp.com/login，都下载了所有内容，但屏幕上没有显示任何内容。

我看到有几篇帖子说要将路由模式更改为哈希，但我仍然得到相同的结果。

请看下面我的文件：

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');
  });

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;

【问题讨论】：

嘿山姆！您能否将您在控制台中看到的具体错误包括在内？
嘿，这就是问题所在...控制台中没有错误。并且网络选项卡显示一切都成功返回（200 OK）

标签： vue.js asp.net-core vue-router

【解决方案1】：

最后在完全重建我的路由器后，我发现了问题。我发现问题出在这个全局路由守卫上：

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

具体来说，isAuthenticated getter 正在抛出错误（静默），因此所有路由在渲染之前都失败了。我将 isAuthenticated 逻辑包装在一个 try-catch 中，如果抛出错误，它会返回 false，现在一切正常。

我仍然不明白为什么这只会影响生产构建，但希望这种体验对陷入相同情况的其他人有用。

【讨论】：