用 Nuxt 3 重写博客前台：一次 SSR 实践
管理后台是 Vue 3，前台自然也用 Vue 生态：一次 SSR 实践的完整记录。
为什么选择 Nuxt
管理后台是 Vue 3，前台自然也用 Vue 生态。SSR 带来的 SEO 收录能力是博客刚需。
本文所有示例代码都可以在本仓库找到。
技术选型
| 维度 | 选择 | 理由 |
|---|---|---|
| 框架 | Nuxt 3 | Vue 3 + 文件路由 + SSR |
| 样式 | Tailwind 4 | @theme 直接映射 CSS 变量 |
| 动效 | GSAP + Lenis | 滚动叙事感 |
渲染策略
请求层封装
export async function apiFetch<T>(path: string) {
const res = await $fetch<ApiResult<T>>(path, { baseURL: '/api' })
if (res.code !== 200) throw new ApiError(res.code, res.msg)
return res.data
}
统一解包 code/msg/data 之后，页面里只需要关心数据本身。
评论 7 条
秋
秋刀鱼IP · IP未知2026-08-29 16:28
修复后验证：发这条应该立刻出现在顶部
秋
秋刀鱼2026-08-30 13:39
感谢反馈！已收到（管理端回复链路测试）
秋
秋刀鱼IP · IP未知2026-08-29 16:23
乐观插入验证：这条应该立即出现在顶部
秋
秋刀鱼IP · IP未知2026-08-29 16:20
第二条：点赞也一起测了
秋
秋刀鱼IP · IP未知2026-08-29 16:08
登录链路测试通过，评论区体验很流畅！
秋
秋刀鱼IP · 四川2026-08-29 06:31
已按文章配置好暗色模式，效果很棒，感谢分享！
秋
秋刀鱼IP · 北京2026-08-29 02:31
动效参数收进规范文档这点太对了，不然每次都是拍脑袋。
秋
秋刀鱼IP · 浙江2026-08-28 18:31
写得真好，正准备把博客也迁到 Nuxt，这篇来得太及时了！
秋
秋刀鱼2026-08-28 20:31
谢谢支持，request 层的封装示例我放在第二节了，可以直接抄。