vue3简单实现SSR

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('渲染服务器启动成功!');
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值