从 Vue + fetch 到现代 Web 架构：一次对话后的认知刷新

Tue, 07 Jul 2026 20:38:00 +0800

最近和 GLM 聊前端架构，被纠正了一堆自以为是的认知。之前我对前后端分离的理解基本停留在"后端写接口、前端 fetch 拿数据渲染"。聊完之后发现这四个点我之前全想错了。

URL 里的 # 号

一开始路由全是 localhost/#/user 这种带 # 的，以为 Vue Router 就这样。后来才知道这是 Hash 模式——默认值，不需要后端配合但 URL 丑。

换成 History 模式：

// Vue Router
const router = createRouter({
  history: createWebHistory(),  // 不是 createWebHashHistory()
  routes: [...]
})

改完访问 localhost/user 确实干净了，但一刷新就 404。因为浏览器把 /user 当成真实路径发给了后端，后端根本没这个路由。

Nginx 加一行兜底就解决了：

location / {
    try_files $uri $uri/ /index.html;
}

找不到对应文件就把请求还给前端入口，让 Vue Router 自己接管。这个组合才是 SPA 的标准玩法。

我之前理解的"前后端分离"就是：浏览器 fetch 后端 API，拿到 JSON 渲染。简单粗暴。

但像淘宝这种体量的网站不可能这么搞。实际架构是三层：

后端（Spring Boot / Go） → 管数据库和业务逻辑，不直接对着浏览器。

BFF 层（Node.js） → 把后端几十个零散接口聚合成前端一个页面需要的数据，该裁的裁、该拼的拼。

前端（Vue / React） → 只管交互和渲染。