Vue Router works fine in development, but doesn't match routes in production - vue.js

Question

I have a Vue SPA that's being served by an ASP Core API. When I run it in development mode, everything works perfectly. But as soon as I deploy it to production (on an Azure App Service), I always get a blank page.
It seems to be specifically the router that can't match the routes, as I can put some arbitrary HTML into my App.vue, and that will render.
If I go into the developer tools, I can see that the index.html and all .js files download successfully and there are no errors in the console. This is true no matter what URL I visit e.g. myapp.com and myapp.com/login, both download everything but nothing displays on screen.
I have seen several posts saying to change the routing mode to hash, but I still get the same result with that.
Please see below my files:
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;

Answer 1

Finally after completely rebuilding my router piece by piece, I found the issue. I found that the problem was in this global route guard:
router.beforeEach((to, from, next) => {
if (store.getters.isAuthenticated) {
next();
} else if (to.name === LOGIN || to.name === SIGNUP) {
next();
} else {
next({ name: LOGIN });
}
});
Specifically, the isAuthenticated getter was throwing an error (silently), so all of the routes were failing before they could render. I wrapped my isAuthenticated logic in a try-catch that returns false if an error is thrown, and now everything works fine.
I still don't understand why this only affects the production build, but hopefully this experience will be useful to others stuck in the same situation.