Pl Vue

服务端渲染

html 渲染模版

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pl Vue</title>
</head>
<body>
  <div id="root"><!--ssr-outlet--></div>
  <script type="module" src="./src/client.tsx"></script>
</body>
</html>

ssrOutlet

// src/server.ts
import { createServer } from 'http';
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { renderToString } from 'pl-vue';
import { ssrOutlet } from "pl-vue/lib/router";
import App from "./app";

const html = readFileSync(resolve(__dirname, 'index.html'), 'utf-8');

const server = createServer(async (req, res) => {
  const appTostring = renderToString(App())
  const content = await ssrOutlet(appTostring, url, html);
  res.write(content);
  res.end();
})

const port = 3000;
server.listen(port, () => {
  console.log(`http://localhost:${port}`);
});

项目搭建示例