programing

서버에서는 Vue.js 공백 페이지이지만 localhost에서는 정상입니다.

kingscode 2022. 7. 16. 15:38
반응형

서버에서는 Vue.js 공백 페이지이지만 localhost에서는 정상입니다.

서버의 빈 화면에 문제가 있습니다.이거 안에 있어요.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;
        });
    });
}

언급URL : https://stackoverflow.com/questions/42881909/vue-js-blank-page-on-server-but-on-localhost-its-fine

반응형