这里不再重复vue的服务端渲染逻辑,只记录一点.net core的问题
HomeController.cs
public async Task<IActionResult> Index()
{
string path = Request.Path.Value.Trim().ToString();
var r = await _nodeServices.InvokeAsync<string>(@"server.js", path).ConfigureAwait(false);
return Content(r, "text/html");
}
Server.js
const fs = require('fs');
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./vue-ssr-server-bundle.json'), {
runInNewContext: false,
template: fs.readFileSync('./index.html', 'utf-8'),
clientManifest: require('./vue-ssr-client-manifest.json')
})
function renderToString(context) {
//var c = JSON.parse(context.replace(/\\"/g, ""));
//return JSON.stringify(context);
return new Promise((resolve, reject) => {
renderer.renderToString(context, (err, html) => {
resolve(html);
})
})
}
module.exports = async (callback, data) => {
const url = data.replace(/\\"/g, "");
var title = 'Home';
var d = {
title: title,
url: url,
meta: '<meta name="description" content="desc" />'
}
var k = await renderToString(d);
callback(null, k.toString());
}
代码其实很简单,但部署网站的时候还是遇到了一些问题,首先服务器上的.net core版本必须与vs发布所选的版本一致,否则会提示服务器500错误。
我在代码中使用了await,导致页面出现错误的时候不能及时返回,页面会显示超时,callback里面promise返回的结果添加了toString()的方法,是为了避免返回结果可能为 object object 不能由c#解析为string:“_nodeServices.InvokeAsync
原文链接:.Net Core处理vue的SSR问题,转载请注明来源!