vue2时代做ssr一般使用vue2+vue-server-renderer可以实现SSR功能,但是vue3中会报错

Vue packages version mismatch: - vue@3.0.0 - vue-server-renderer@2.6.12 This may cause things to work incorrectly. Make sure to use the same version for both.

意思是需要使用相同版本的vue和vue-server-renderer,但是后者并没有3.0的版本,所以网上查了下,发现vue3可以不使用插件就实现SSR,就是原生支持。

然后写了个小damo发现确实如此。

const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');
let app = express();

const vm = createSSRApp({
	template: `
    <div>123</div>
  `,
});

app.get('/', async function (req, res) {
	try {
		const html = await renderToString(vm);
		res.send(html);
	} catch (error) {
		res.status(500).send('系统内部错误');
	}
});

app.listen(3000, () => {
	console.log('渲染服务器启动成功!');
});

Logo

前往低代码交流专区

更多推荐