服务器上的 Vue.js 空白页面但在本地主机上没问题

Question

我的服务器出现黑屏问题。 我在 main.js 中有这个:

import Vue from 'vue';
import axios from 'axios/dist/axios';

import Login from './components/Login.vue';
import Register from './components/Register.vue';
import MainMenu from './components/MainMenu.vue';
import LevelsMenu from './components/LevelsMenu.vue';


Vue.component('app-login', Login);
Vue.component('app-register', Register);
Vue.component('app-main-menu', MainMenu);
Vue.component('app-levels-menu', LevelsMenu);

const app = new Vue({
el: '#app',
data: {
    loggedIn: false,
},
methods: {
    onLogin() {
        var self = this;
        axios.get('/api/user/isLoggedIn').then(function(response) {
            var isLoggedIn = response.data.data;
            self.loggedIn = isLoggedIn;
        });    
    }
},
mounted() {
    var self = this;
    axios.get('/api/user/isLoggedIn').then(function(response) {
        var isLoggedIn = response.data.data;
        self.loggedIn = isLoggedIn;
    });
}
});

当页面以微秒加载时，我可以看到有一个内容，但之后它就消失了。您可以在 http://3dominator.com/demo 上查看这件事

我正在屏幕上绘制一些组件。主要问题是在本地主机上一切看起来都很好，但在服务器上它只是空白。

任何想法可能是什么问题？

编辑

它不仅仅适用于 Chrome。在 Firefox 上没问题。

Answer 1

看来我必须这样做:

mounted() {
    this.$nextTick(function () {
        var self = this;
        axios.get('/api/user/isLoggedIn').then(function(response) {
            var isLoggedIn = response.data.data;
            self.loggedIn = isLoggedIn;
        });
    });
}