近期领导要求将已上线的VUE项目进行SSR改造,本人一枚小白菜只能网上‘翻箱倒柜’的寻找改造方法,屡遇问屡'百度'
跟着网上的开源例子,好不容易能够打包出两个json文件了,意外发生了。
在node server.js 时报错了
// server.js
const express = require("express");
const fs = require("fs");
const path = require("path");
// 创建express实例和vue实例
const app = express();
// 创建渲染器
const { createBundleRenderer } = require("vue-server-renderer");
const serverBundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");
const renderer = createBundleRenderer(serverBundle, {
runInNewContext: false,
template: fs.readFileSync("./src/index.template.html", "utf-8"), // 宿主模板文件
clientManifest
});
// 中间件处理静态文件请求
// // 设置静态资源目录
app.use(express.static(path.join(__dirname, "dist")));
// app.use(express.static('../dist/client', {index: false})) // 为false是不让它渲染成dist/client/index.html
// // app.use(express.static('../dist/client'))
// 前端请求什么我都不关心,所有的路由处理交给vue
app.get("/", async (req, res) => {
// console.log("req--", req);
// console.log("res--", res);
try {
const context = {
url: req.url,
title: "ssr test"
};
// console.log(req.url);
const html = await renderer.renderToString(context); // 之前接收vue实例,现在接收上下文
// console.log(html);
res.send(html);
} catch (error) {
console.log(error);
res.status(500).send("服务器内部错误" + error);
}
});
app.listen(8688, () => {
console.log("渲染服务器启动成功" + "http://localhost:8688");
});
请求支援~~
看这个错误要大修改了,node没有window对象,全局对象为global。而且注意变量作用域,node是模块加载,var申明的局部全局变量不会挂载到global下,这个和浏览器window作用域下var申明的变量变为window属性不同。。
500服务有问题
console.log(error); 这个打印结果是什么
node 没 window
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!