'Production build is missing a piece of template

As the problem states, the router-view is not showing up within the vite preview, however it does show up when running vite. I need to have it work in the preview, since that is also the one that shows up on production. I do make sure to also run the build before I run vite preview, however this has had no use so far.

nginx.conf

location / {
    gzip off;
    root /usr/share/nginx/html/;
    index index.html;
    try_files $uri $uri/ /index.html;
}

I tried out the try_files $uri $uri/ /index.html; from another post, which did not seem to work in my case.

router.js

const history = createWebHistory();

const routes = [
  {
    path: "/",
    name: "dashboard",
    component: Dashboard,
  },
];

const router = new createRouter({
  history: history,
  routes
});

export default router;

index.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>

main.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');

App.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>

Of course this also has the components of the header, footer and sidebar and the v-slot is where the header, content and footer are slotted in place.

My question in this all is, how can I configure Vite and Vue 3.x to show the router-view whenever I use vite preview?

vue.jsvue-routervuejs3vite


Solution 1:[1]

So, I'm not sure how even this was working in dev mode but it should not work at all.

So, I've added ESlint + Prettier to clean the whole project a bit + bring up some warning/errors. You can check it per-file, but places like the vite.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.

I saw that you've installed vue3-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.

Here is the actual code of my freshly created WorkingCarousel.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>

And here is the actual result of the working carousel, this is working totally fine while checking the production build (preview script) and using more usual Vue patterns.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 King Reload

Related Questions