梗概
- 在renderer目录下定义指定页面对应的渲染方法
- 当页面被请求到的时候，会找对对应的页面，并执行页面脚本，得到页面对应的pageContext
.page.server.js服务端中执行.page.client.js客户端中执行
- 页面和pageContext会被传递给定义好的渲染方法
实例
// /renderer/_default.page.server.js
// Environment: Node.js
import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
export { render };
async function render(pageContext) {
const { Page, pageProps } = pageContext;
const app = createSSRApp({
render: () => h(Page, pageProps),//渲染传入的页面
});
const appHtml = await renderToString(app);
const title = "Vite SSR";
return escapeInject`<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
</head>
<body>
<div id="app">${dangerouslySkipEscape(appHtml)}</div>
</body>
</html>`;
}// /renderer/_default.page.client.js
// Environment: Browser
import { createSSRApp, h } from "vue";
export { render };
async function render(pageContext) {
const { Page, pageProps } = pageContext;
const app = createSSRApp({
render: () => h(Page, pageProps),
});
app.mount("#app");
}Nuxt 将这一点抽象出来，让我们可以更快上手，但也意味着我们失去了对应用程序架构核心部分的控制， 我们最终会在 Nuxt 限制性的黑盒上失去更多时间 这种级别的控制使我们 轻松自然 地集成我们想要的任何工具（Vuex, GraphQL, Service Worker, …）