|
| 1 | +// nodejs代码 |
| 2 | +// express是我们web服务器 |
| 3 | +const express = require("express"); |
| 4 | +const path = require("path"); |
| 5 | +const fs = require("fs"); |
| 6 | + |
| 7 | +// 获取express实例 |
| 8 | +const server = express(); |
| 9 | + |
| 10 | +// 获取绝对路由函数 |
| 11 | +function resolve(dir) { |
| 12 | + // 把当前执行js文件绝对地址和传入dir做拼接 |
| 13 | + return path.resolve(__dirname, dir); |
| 14 | +} |
| 15 | + |
| 16 | +// 处理favicon |
| 17 | +const favicon = require("serve-favicon"); |
| 18 | +server.use(favicon(path.join(__dirname, "../public", "favicon.ico"))); |
| 19 | + |
| 20 | +// 第 1 步：开放dist/client目录，关闭默认下载index页的选项，不然到不了后面路由 |
| 21 | +// /index.html |
| 22 | +server.use(express.static(resolve("../dist/client"), { index: false })); |
| 23 | + |
| 24 | +// 第 2 步：获得一个createBundleRenderer |
| 25 | +const { createBundleRenderer } = require("vue-server-renderer"); |
| 26 | + |
| 27 | +// 第 3 步：导入服务端打包文件 |
| 28 | +const bundle = require(resolve("../dist/server/vue-ssr-server-bundle.json")); |
| 29 | + |
| 30 | +// 第 4 步：创建渲染器 |
| 31 | +const template = fs.readFileSync(resolve("../public/index.html"), "utf-8"); |
| 32 | +const clientManifest = require(resolve( |
| 33 | + "../dist/client/vue-ssr-client-manifest.json" |
| 34 | +)); |
| 35 | +const renderer = createBundleRenderer(bundle, { |
| 36 | + runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext |
| 37 | + template, // 宿主文件 |
| 38 | + clientManifest // 客户端清单 |
| 39 | +}); |
| 40 | + |
| 41 | +// 编写路由处理不同url请求 |
| 42 | +server.get("*", async (req, res) => { |
| 43 | + console.log("访问路径", req.url); |
| 44 | + // 构造上下文 |
| 45 | + const context = { |
| 46 | + title: "ssr test", |
| 47 | + url: req.url // 首屏地址 |
| 48 | + }; |
| 49 | + // 渲染输出 |
| 50 | + try { |
| 51 | + const html = await renderer.renderToString(context); |
| 52 | + // 响应给前端 |
| 53 | + res.send(html); |
| 54 | + } catch (error) { |
| 55 | + res.status(500).send("服务器渲染出错"); |
| 56 | + } |
| 57 | +}); |
| 58 | + |
| 59 | +// 监听端口 |
| 60 | +server.listen(3000, () => { |
| 61 | + console.log("server running!"); |
| 62 | +}); |
0 commit comments