生产版本缺少一块模板
正如问题所述,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 技术交流群。
