首页 » 后端 » .Net Core处理vue的SSR问题

.Net Core处理vue的SSR问题

 

这里不再重复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问题,转载请注明来源!