Como indica el problema, router-viewno aparece dentro del vite preview, sin embargo, aparece cuando se ejecuta vite. Necesito que funcione en la vista previa, ya que también es el que aparece en producción. Me aseguro de ejecutar también la compilación antes de ejecutar vite preview, sin embargo, esto no ha tenido ningún uso hasta ahora.
nginx.conf
location / {
gzip off;
root /usr/share/nginx/html/;
index index.html;
try_files $uri $uri/ /index.html;
}
Probé el try_files $uri $uri/ /index.html;de otra publicación, que no pareció funcionar en mi caso.
enrutador.js
const history = createWebHistory();
const routes = [
{
path: "/",
name: "dashboard",
component: Dashboard,
},
];
const router = new createRouter({
history: history,
routes
});
export default router;
índice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
principal.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./index.css";
const app = createApp(App);
app.use(router);
app.mount('#app');
aplicación.vue
<template>
<base-layout>
<template v-slot:header>
<Header/>
</template>
<template v-slot:default>
<Sidebar/>
<router-view></router-view>
</template>
<template v-slot:footer>
<Footer/>
</template>
</base-layout>
</template>
Por supuesto, esto también tiene los componentes del encabezado, el pie de página y la barra lateral, y la ranura en V es donde se ubican el encabezado, el contenido y el pie de página.
Mi pregunta en todo esto es, ¿cómo puedo configurar Vite y Vue 3.x para mostrar el router-viewcuando lo uso vite preview?
Solución del problema
So, I'm not sure how even this was working in dev mode but it should not work at all.
Entonces, agregué ESlint + Prettier para limpiar un poco todo el proyecto + mostrar algunas advertencias/errores. Puede verificarlo por archivo, pero lugares como elvite.config.js are having 2 interesting errors (process.env.NODE_ENV is a webpack thing, not a Vite one for example).
Then, I've tried to isolate the views/components to find out what was the issue. Turned out Carousel.vue was using some hacky stuff. Also, the pagination pages were not really working initially.
Vi que has instaladovue3-carousel but were not actually using it. Hence, I've implemented a quick and simple carousel looking at the other one that you've got.
Aquí está el código real de mi recién creadoWorkingCarousel.vue
<template>
<section class="flex">
<carousel:items-to-show="2.5":ref="carouselRef">
<slide v-for="item in items":key="item.id">
<div class="item-size">
<img:src="item.imageUrl" />
<p>{{ item.name }}</p>
</div>
</slide>
</carousel>
<div class="pagination">
<button @click="previousSlide">prev</button>
<button @click="nextSlide" style="margin-left: 1rem">next</button>
</div>
</section>
</template>
<script>
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide } from 'vue3-carousel'
export default {
name: 'App',
components: {
Carousel,
Slide,
},
props: {
items: {
type: Array,
default: () => [],
},
carouselRef: {
type: String,
default: '',
required: true,
},
fallbackImgSrc: {
type: String,
default: 'https://source.unsplash.com/random',
},
fallbackImgTitle: {
type: String,
default: 'Avatar',
},
},
computed: {
fallbackImgAlt() {
return this.fallbackImgTitle
},
},
methods: {
nextSlide() {
this.$refs[this.carouselRef].next()
},
previousSlide() {
this.$refs[this.carouselRef].prev()
},
},
}
</script>
<style scoped>
.flex {
display: flex;
flex-direction: column;
}
.pagination {
text-align: right;
margin-top: 1rem;
}
.item-size img {
height: 8rem;
object-fit: cover;
}
</style>
Y aquí está el resultado real del carrusel de trabajo, funciona totalmente bien mientras se verifica la compilación de producción ( previewscript) y se usan patrones de Vue más habituales.
No hay comentarios:
Publicar un comentario