生产版本缺少一块模板

发布于 01-19 10:08 字数 2085 浏览 3 评论 0原文

正如问题所述,router-view 未显示在 vite 预览 中,但在运行 vite 时确实显示。我需要让它在预览中工作,因为这也是在生产中出现的。我确实确保在运行 vite Preview 之前也运行构建,但是到目前为止这还没有用处。

我尝试了另一篇文章

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

中的 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 预览 时显示 router-view

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文