6. Node 集成正式 build 的 Vite 应用的 SSR

归档.zip
修改 package.json 脚本

"scripts": {
  "dev": "vite",
  "build": "npm run build:client && npm run build:server",
  "build:client": "vite build --outDir dist/client",
  "build:server": "vite build --outDir dist/server --ssr src/server-entry.jsx",
  "serve": "vite preview"
},

执行 npm run buid , 打包出两份文件

修改 server.js , 作为生产环境使用

const express = require("express");
const fs = require("fs");
const app = express();
app.use(express.static("dist/client")); // 静态资源目录映射
// 获取 html 模版
const template = fs.readFileSync("dist/client/index.html", "utf-8");
app.get("*", async (req, res) => {
  // 获取渲染函数
  const { render } = require("./dist/server/server-entry");
  const context = {};
  // 渲染路由对应的 html
  const html = await render(req.url, context);
  if (context.url) {
    // 如果有此路由，重定向此路由即可
    res.redirect(301, context.url);
    return;
  }
  // 替换字符串为 html 模版
  const responseHtml = template.replace("<!-- APP_HTML -->", html);
  res.set("content-type", "text/html").send(responseHtml);
});
app.listen(4000);

• 启动 node server.js