从 Vue + fetch 到现代 Web 架构：一次对话后的认知刷新
最近和 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） → 只管交互和渲染。 ...