vuepress复杂网站开发后记

文章讲述了在使用Vuepress开发工作台和评论页面时遇到的SSR问题,包括编译失败、Object.removeundefined错误、页面混乱和hydrationmismatch问题。为了解决这些问题,工作台页面改用Vue进行SPA开发,评论页面采用lit框架,利用后台模板做动态内容渲染。建议在需要动态内容和SEO时考虑其他框架,如Vue或lit。

前段时间写了一篇vuepress2的开发文章,很多前端小伙伴看,给了我很多鼓励,写这个的原因是我们的百家饭OpenAPI平台是用vuepress搭建的,最开始选型是因为开始的时候觉得只是一个介绍性的产品网站,所以选型用了类似vue的vuepress,但是随着百家饭站点开发的深入,vuepress的很多问题给我们造成了很多的麻烦,以至于我们目前的架构变成了这样一个复杂结构:

|---/api/home (工作台页面,vue开发)
|---/page/{id} 富格式评论页面,lit开发,后端做服务器渲染
|---其他页面,vuepress开发

可以看到,除了原有的一些静态内容页面之外,我们原本使用vuepress开发的工作台页面被移出来,使用vue做了SPA,并和其他页面使用链接进行跳转。

带完整OpenAPI编辑功能的工作台页面使用vuepress开发有很多困难的地方

 

而评论页面(类似blog页面)也被拿出来单独使用lit进行了开发。

因为内容是动态服务器生成,使用了Golang Templ
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百家饭AI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值