Laravel ve Vue ile bi proje yapıyorum. Localde çalışan proje sunucuda çalışmıyor. Ortada hata vs. de yok. Render işlemleri yapılıyor ama RouterView'ın olduğu yer boş kalıyor ve beyaz sayfa gözüküyor.
Kodlarım şöyle:
app.js:
import './bootstrap';
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import { createPinia } from "pinia";
import App from './App.vue'
import routes from "~pages";
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
import "@mdi/font/css/materialdesignicons.css";
import DataTable from "./components/DataTable.vue";
import DialogBox from "./components/DialogBox.vue";
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: "mdi",
aliases,
sets: {
mdi,
},
},
})
const store = createPinia();
const app = createApp(App)
const router = createRouter({
history: createWebHistory(),
routes,
});
window.user = JSON.parse(localStorage.getItem("user") || "{}");
window.isLogined = window.user && window.user.token;
router.beforeEach((to, from, next) => {
if (!["login", "logout"].includes(to.name) && !window.isLogined) {
next({ name: "login" });
} else {
next();
}
});
app.use(vuetify);
app.use(router);
app.use(store);
app.component("DataTable", DataTable)
app.component("DialogBox", DialogBox)
app.mount("#app");
App.vue:
<script setup>
import { ref } from "vue";
const drawer = ref(true);
const rail = ref(false);
const user = JSON.parse(localStorage.getItem("user"));
const isLogined = user && user.token;
</script>
<template>
<v-card elevation="0">
<v-layout>
<v-navigation-drawer v-model="drawer" :rail="rail" permanent @click="rail = false" v-if="isLogined" width="250">
<v-list-item>
<v-list-item-avatar>
<v-img src="/logo.png" height="100"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item class="text-lg-center">
<v-list-item-title>
<h3>TEST</h3>
</v-list-item-title>
<v-list-item-subtitle style="padding-bottom: 10px;">
<h5>TEST</h5>
</v-list-item-subtitle>
</v-list-item>
<v-divider></v-divider>
<v-list-item :to="{ path: '/categories' }" title="Kategoriler">
<template v-slot:prepend>
<v-icon icon="mdi-tag-multiple"></v-icon>
</template>
</v-list-item>
<v-list-item :to="{ path: '/products' }" title="Ürünler">
<template v-slot:prepend>
<v-icon icon="mdi-tag-multiple"></v-icon>
</template>
</v-list-item>
<v-list-item :to="{ path: '/consumables' }" title="Sarf Malzemeleri">
<template v-slot:prepend>
<v-icon icon="mdi-tag-multiple"></v-icon>
</template>
</v-list-item>
<v-list-item :to="{ path: '/materials' }" title="Hammaddeler">
<template v-slot:prepend>
<v-icon icon="mdi-cube-outline"></v-icon>
</template>
</v-list-item>
<v-list-item :to="{ path: '/units' }" title="Birimler">
<template v-slot:prepend>
<v-icon icon="mdi-weight-kilogram"></v-icon>
</template>
</v-list-item>
<v-list-item :to="{ path: '/recipes' }" title="Reçeteler">
<template v-slot:prepend>
<v-icon icon="mdi-food-variant"></v-icon>
</template>
</v-list-item>
<template v-slot:append>
<div class="pa-2">
<v-btn link :to="{ path: '/logout' }" block>
Çıkış Yap
</v-btn>
</div>
</template>
</v-navigation-drawer>
<v-main style="min-height: 300px; margin: 10px;">
<RouterView />
</v-main>
</v-layout>
</v-card>
</template>
Localde sorunsuz çalışıyor ama sunucuda beyaz sayfa geliyor. Sorun nerede olabilir?
