Vue.js服务器上的空白页,但在本地主机上很好



我在服务器上遇到空白屏幕的问题。我在里面有这个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。在火狐上没关系。

似乎我必须这样做:

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

相关内容

最新更新