静态主页与 Vercel Function 如何协作

解释静态前端、浏览器动态请求与 Vercel Function 在当前主页中的职责边界。

· 部署实践

当前网站属于哪种类型

这个项目采用 Vue 3 和 Vite 构建。构建完成后，页面、样式、脚本和图片会成为静态文件，由 Vercel 分发。

浏览器加载这些文件后，再动态获取天气、一言、壁纸和音乐数据。因此页面以静态部署为基础，同时拥有实时内容和交互能力。

Vercel Function 的职责

当前音乐接口位于 API 路径中。它负责：

  1. 接收前端的歌单或歌词请求；

  2. 从 Vercel 环境变量读取服务端配置；

  3. 请求音乐上游接口；

  4. 整理结果并返回浏览器。

浏览器只看到接口结果，服务端配置继续保存在 Vercel 环境变量中。

静态内容与动态数据如何选择

适合构建成静态内容的部分：

  • 博客文章

  • 项目案例

  • 关于页面

  • 技术文档

  • RSS 和 sitemap

适合通过 Function 动态处理的部分：

  • 联系表单

  • 音乐代理

  • 登录回调

  • 评论写入

  • AI 对话

  • 定时同步任务

为什么博客先采用 Markdown

Markdown 文章在构建阶段直接进入前端资源，部署简单，也与当前 Vercel-only 流程保持一致。

新增文章时，只需增加 Markdown 文件和对应的文章信息，再执行：

npm run check

验证通过后提交 Git，Vercel 就会按现有流程重新部署网站。