生产构建缺少一块模板

Question

如问题所述，router-view 未出现在 vite preview 中，但它确实出现在运行宁 vite 中。我需要让它在预览中工作，因为这也是在生产中出现的那个。我确保在运行 vite preview 之前也运行构建，但是到目前为止这没有用。

nginx.conf

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

我尝试了另一个 post 的 try_files $uri $uri/ /index.html;，这对我来说似乎不起作用。

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>

当然这也有页眉、页脚和侧边栏的组件，而 v 槽是页眉、内容和页脚所在的位置。

我的问题是，如何配置 Vite 和 Vue 3.x 以在我使用 vite preview 时显示 router-view？

Answer 1

所以，我不确定这在 dev 模式下是如何工作的，但它根本不应该工作。

所以，我添加了 ESlint + Prettier 来稍微清理整个项目 + 调出一些 warning/errors。您可以检查它 per-file，但是像 vite.config.js 这样的地方有 2 个有趣的错误（例如 process.env.NODE_ENV 是一个 webpack 的东西，而不是 a Vite）。

然后，我尝试隔离 views/components 以找出问题所在。原来 Carousel.vue 使用了一些骇人听闻的东西。此外，分页页面最初并没有真正工作。

我看到你已经安装了 vue3-carousel 但实际上并没有使用它。因此，我实现了一个快速简单的旋转木马，查看您拥有的另一个旋转木马。

这是我刚创建的实际代码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>

这是工作轮播的实际结果，在检查生产构建（preview 脚本）和使用更常见的 Vue 模式时，它工作得很好。

生产构建缺少一块模板

Production build is missing a piece of template

vue.js

vue-router

vuejs3

vite